隐秘的角落之BFC

神奇的BFC

1.BFC的概念

我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。
块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
原则： 如果一个元素具有BFC,那么内部元素不会影响外面的元素。所以，BFC元素是不可能发生margin重叠的，因为margin重叠会影响外面的元素的；BFC元素也可以用来清除浮动带来的影响，因为如果不清除，子元素浮动则会造成父元素高度塌陷，必然会影响后面元素的布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。

2.哪些情况会创建BFC

根元素HTML会自动形成BFC
float的值不为none
overflow的值为auto，scroll，hidden
display的值为table-cell，table-caption和inline–block中的任何一个
position的值不为relative和static 即 position: absolute/fixed
设置overflow值为hidden时使container元素具有BFC，那么子元素child浮动便不会带来父元素的高度坍塌影响。

3.BFC的具体用途

(1)利用伪类元素清除浮动：

.box::after{
content:" ";
display:block;
height:0;
 visibility: hidden;
clear:both;
}

(2)利用BFC避免margin重叠

将margin重合的两个盒子都设置为BFC即可使重叠的margin分开
。

(3)解决浮动覆盖问题

给left设置浮动，使其脱离文档流，这时left会覆盖right部分区域，解决这个问题可将right设置为BFC。这是因为BFC的其中一个特性：BFC的区域不会与float box重叠。