BFC
BFC (Block formatting context) “块级格式化上下文”
它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。
- 触发
满足下列条件之一就可触发BFC
【1】根元素，即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
- 特性
【1】阻止垂直外边距（margin-top、margin-bottom）折叠
属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠―― 分为两个BFC就可以消除这种margin 重叠
<style> .dv { width: 400px; height: 400px; border: 1px solid slateblue; } .dv2 { width: 200px; height: 100px; background: salmon; margin-bottom: 30px; } .dv3 { width: 200px; height: 100px; margin-top: 60px; background: seagreen; } <div class="dv"> <div class="dv2"> </div> <div class="dv3"> IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ; </div> </div>
解决 触发其中一个div的BFC，使得两个div不在同一个 BFC内，这样就可以阻止这两个div的margin重叠
.dv4{ /* overflow: hidden; */ /* display: inline-block; */ position: absolute; }
【2】包含浮动元素
可以包含它内部的所有元素，包括浮动元素――因此一清除内部浮动
<style> .second{ width: 400px; padding: 10px; border: 1px solid slateblue; } .float{ float: left; width: 200px; height: 50px; background: salmon; } .s1{ background: slategray; } </style> <div class="second"> <div class="float"> </div> <div class="s1"> IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ; IE6、IE7中， // function foo(){ // console.log(a); // } // function bar(){ // var a =3 ; </div> </div> 元素内容比较多的时候，内容会环绕着浮动的元素
清除环绕，为其本身创建一个BFC
.s1{ overflow: hidden; background: slategray; }
元素内容比较少的时候，会出现高度坍塌， 足够的文本去一个浮动的元素 ， 浮动元素脱离文档流，父元素（class=second）高度就会随着文本的减少而降低 ，父元素未被浮动元素撑开，父元素的高度坍塌。
改变坍塌：为父元素创建一个BFC
.second{ width: 400px; padding: 10px; border: 1px solid slateblue; overflow: hidden; //或者 overflow: auto; }
整理自：
https://blog.csdn.net/liuliuliu_666/article/details/70847566
文章来源: BFC