BFC:块格式化上下文(Block Formatting Context)
是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品
(如果一个元素符合触发 BFC 的条件,则 BFC 中的元素布局不受外部影响)
哪些条件会形成BFC?
1、浮动元素 float:left | right | inherit(none除外)
2、position:absolute 或 fixed 定位
3、display:inline-block | inline-flex | table-cell
4、overflow:hidden | auto | scroll (visible除外)
BFC的特性:
1、bfc 是一个独立的容器,容器内子元素不会影响容器外的元素
2、bfc的区域不会与float的元素区域重叠
3、计算bfc的高度时,浮动元素也参与计算
4、垂直方向上的距离由margin决定
5、内部的Box会在垂直方向上一个接一个的放置
栗子:
bfc的区域不会与float的元素区域重叠,使用overflow:hidden解决
<div class="column1"></div> <div class="column2"></div>
.column1{ width:200px; height:200px; margin-right:12px; background:orangered; float:left; } .column2{ width:100%; height:200px; background:yellow; /* overflow:hidden;/*实现BFC*/ }
使用overflow:hidden前和使用后
使用后
外边距重叠
<div class="outside"> <div class="box1"></div> <div class="box2"></div> </div>
.outside{ width: 100px; height: 100px; background: deeppink; } .box1{ height:30px; margin:10px 0; background:orange; } .box2{ height:30px; margin:30px 0; background:orange; }
由于垂直外边距会折叠,因此两个box盒子的垂直距离为30px而不是40px。
解决方法,把其中一个box放在另一个BFC容器里面
<div class="outside"> <div class="box1"></div> <div class="content"> <div class="box2"></div> </div> </div>
.content{ overflow:hidden; }
内部的Box会在垂直方向上一个接一个的放置
<div class="container"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> <div class="item item4"></div> </div>
.container{ /*position:absolute;/*实现BFC*/ height:auto; background:gray; } .item{ height:30px; } .item1{ width:200px; background:deepskyblue; } .item2{ width:100px; background:yellow; float:left; } .item3{ width:300px; background:pink; } .item4{ width:400px; background:brown; }
内部的Box会在垂直方向上一个接一个的放置,浮动的元素也是这样,box3浮动,他依然接着上一个盒子垂直排列。并且所有的盒子都左对齐