## 两栏布局 ### 一栏固定宽度，一栏自适应 ```HTML

left固定

right自适应

``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76fceee825e94d378d318900fd0d3b59~tplv-k3u1fbpfcp-watermark.image) * **1. 左侧float:left + 右侧margin-left** ```CSS .left{ float: left; /* 固定侧浮动 */ width: 100px; height: 200px; background-color: skyblue; } .right{ margin-left: 100px; /* 值为固定侧的宽度 */ height: 200px; background-color: pink; } ``` 因为块级元素有流体特性，默认填充外部容器，因此只需要设置margin，不设置width也可以让内容填满剩余部分。 * **2. 左侧float:left + 右侧overflow:hidden** ```CSS .left{ float: left; width: 100px; height: 200px; background-color: skyblue; } .right{ height: 200px; overflow: hidden; /* 触发BFC，独立容器，保留流体特性，自动退避浮动元素宽度的距离 */ background-color: pink; } ``` 设置overflow:hidden会触发块级格式化上下文（BFC）。\ 具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响外面的元素。触发了BFC的元素仍然保持流体特性，也就是说BFC元素虽然不与浮动交集，自动退避浮动元素宽度的距离，但本身作为普通元素的流体特性依然存在，反映在布局上就是`自动填满除去浮动内容以外的剩余空间`。 **BFC具有普通元素没有的特性：** 下边距不发生折叠；可以清除浮动；可以阻止元素被覆盖。\ 正因为有了这些特性，所以右边可以用触发BFC的元素来清除左边浮动的影响。 **触发BFC的方法：** - body根元素 - 浮动元素（除了float:none） - 定位的元素（absolute、fixed） - display ( inline-block、table-cells、flex ) - overflow ( hidden、auto、scroll ) **注**：如果是右固定左自适应，html结构中.right的div在.left的div上方，如果right写在下方，.left元素不会脱离文档流，那么.right会自成一行，达不到想要的结果。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89b5fd9518c5482aaf9944a0ef5bd38f~tplv-k3u1fbpfcp-watermark.image) * **3. 使用绝对定位absolute** ```CSS .container{ position: relative; } .left{ height: 200px; width: 100px; background-color: skyblue; } .right{ height: 200px; position: absolute; /* 子绝父相，要记得给父元素设置相对定位 */ top: 0; left: 100px; /* left值为左盒子宽度 */ right: 0; /* 通过设置right:0；来限制右边块级元素的宽度 */ background-color: pink; } ``` * **4. 利用弹性布局flex(推荐)** ```CSS .container{ display: flex; } .left{ height: 200px; width: 100px; background-color: skyblue; } .right{ height: 200px; flex: 1; /* 自动填充满容器 */ background-color: pink; } ``` `flex`属性是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写，默认值为`0 1 auto`。后两个属性可选。\ **flex-grow**: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大\ **flex-shrink**: 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小\ **flex-basis**: 给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小 ### 一栏不定宽，一栏自适应不定宽度那一侧宽度就会随着里面内容的大小而缩放，内容撑开不用设置宽度。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/91b547b7477543f79ecc4b157ca2b569~tplv-k3u1fbpfcp-watermark.image) * **1. 左侧float:left + 右侧overflow:hidden** ```CSS .left,.right{ height: 200px; } .left{ float: left; background-color: skyblue; } .right{ overflow: hidden; background-color: pink; } ``` * **2. 弹性布局flex** ```CSS .container{ display: flex; } .left,.right{ height: 200px; } .left{ background-color: skyblue; } .right{ flex: 1; background-color: pink; } ``` ### 设置两栏高度相等上述方法，设置了.left和.right高度相同，但是如果不设置高度，高度被内容撑开，会出现两栏不等高的情况，如下图所示： ```HTML

我是left--我是left--我是left--我是left

我是right我是right我是right我是right我是right我是right我是right我是right

``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88fc2df69983484d843506e22f3b7953~tplv-k3u1fbpfcp-watermark.image) * **1. 给两栏设置相等高度** * **2. 利用弹性布局flex** ```CSS .container { display: flex; } .left{ background-color: skyblue; } .right{ background-color: pink; } ``` ### 左右宽度比1:2，右边分为上下结构，高度比为1:1 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3190ed917a147f5929f370d9067207e~tplv-k3u1fbpfcp-watermark.image?) ```HTML

left

rigTop

rigBot

``` ```CSS .container { display: flex; } .left{ width: 33.3%; height: 100px; background-color: skyblue; } .right{ flex: 1; height: 100px; background-color: pink; } .rigTop,.rigBottom { height: 50%; } ``` ## 三栏布局所谓三栏布局就是指页面分为左中右三部分，左右固定，中间部分自适应的一种布局方式。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ccb51a3863f747f9a27d3a579050956d~tplv-k3u1fbpfcp-watermark.image?) ### 弹性布局flex(推荐) ```HTML

left