两栏布局 | 易学教程

法一：左侧float:left;右侧margin-left;

html

<div class="left">left</div>

<div class="right">right</div>

css

body,div{padding: 0 ;margin:0;}

.left,.right{height: 200px;}

.left{float: left;width: 200px;}

.right{margin-left: 200px; background-color: greenyellow;}

//因为块级元素有流体特性，即默认会填充满外部容器，所以只需要设置margin，不需要设置width就可以让content填满剩余的部分。

法二：左侧float:left; 右侧overflow:hidden；

html

<div class="left">left</div>

<div class="right">right</div>

css

body,div{padding: 0 ;margin:0;}

.left,.right{height: 200px;}

.left{float: left;width: 200px;}

.right{overflow:hidden; background-color: greenyellow;}

右侧设置的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会自成一行，达不到想要的效果。

法三：利用绝对定位

html

<div class="wrap">

<div class="left">left</div>

<div class="right">right</div>

</div>

css

.wrap{position : relative; }

.left{ width: 200px; }

.right{ position: relative; top: 0; left: 200px; right: 0}

//通过设置right:0；来限制右边块级元素的宽度

法四：利用弹性布局

html

<div class="wrap">

<div class="left">left</div>

<div class="right">right</div>

</div>

css

body,div{padding: 0 ;margin:0;}

.wrap{display: flex;}

.left,.right{height: 200px;}

.left{width: 200px;}

.right{flex: 1; background-color: greenyellow;}

来源：https://www.cnblogs.com/moumoon/p/11001706.html

标签

bfc

overflow