文档流分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC->formatting context，格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。
BFC是block formatting context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域
满足下列条件之一就可触发BFC
1、根元素，即HTML元素
2、float的值不为none
3、overflow的值不为visible
4、display的值为inline-block、table-cell、table-caption
5、position的值为absolute或fixe
1、可以阻止元素被浮动元素覆盖
<div class="box"> <div class="item1">左浮动</div> <div class="item2">B-F-C</div> </div> <style> .item1 { width: 100px; height: 100px; background-color: yellow; float: left; } .item2 { width: 200px; height: 200px; background-color: pink; overflow: hidden; } </style>
通过改变内容为BFC盒子的属性值，使其成为BFC，以此阻止被左浮动盒子覆盖
.item2 { /*触发BFC条件之一*/ /*float: left;*/ /*display: inline-block;*/ /*overflow: hidden;*/ /*如果是fixed或者absolute会覆盖在左浮动盒子上面。 因为默认left:0;top:0;*/ /*position: absolute; */ }
2、可以包含浮动元素
<div class="box"> <div class="item1">左浮动</div> </div> <style> .box { border: 2px solid #000; } .item1 { width: 100px; height: 100px; background-color: yellow; float: left; } </style>
改变高度塌陷的黑色边框的盒子，使其成为BFC，来包含绿色的浮动盒子
.box { border: 2px solid #000; /*position: absolute;*/ /*overflow: hidden;*/ /*float: left;*/ display: inline-block; }3、属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠
<div class="box"> <div class="item1">1</div> <div class="item2">2</div> </div> <style> body { margin: 0; } .item1 { width: 100px; height: 100px; background-color: yellow; margin-bottom: 50px; } .item2 { width: 100px; height: 100px; background-color: red; margin-top: 50px; } </style>给第二个盒子外面包一个div，通过改变此div的属性使红色盒子与绿色盒子分属于两个不同的BFC，以此来阻止margin重叠
<div class="box"> <div class="item1">1</div> <div class="item2Wrap"> <div class="item2">2</div> </div> </div> <style> .item1 { width: 100px; height: 100px; background-color: yellow; margin-bottom: 50px; } .item2Wrap { overflow: hidden; } .item2 { width: 100px; height: 100px; background-color: red; margin-top: 50px; } </style>
转载于:https://www.cnblogs.com/Jiangchuanwei/p/9321785.html
相关资源：各显卡算力对照表！