什么是BFC

BFC(Block formatting context)直译为"块级格式化上下文"，它是网页中一个独立的渲染区域，这个渲染区域只有块级（Block）元素才能参与，它规定了内部的块级元素如何布局。简单说：BFC就是页面上的一个隔离的独立渲染区域，区域里面的子元素不会影响到外面的元素，外面的元素也不会影响到区域里面的子元素。

BFC布局规则

默认，内部的块元素会在垂直方向，一个接一个地放置。每个块元素独占一行。
块元素垂直方向的总距离由边框内大小+margin共同决定。
属于同一个BFC的两个相邻块元素在垂直方向上的margin会发生重叠/合并。但水平方向的margin不会。
计算父元素BFC渲染区域的高度时，内部浮动元素的高度，都必须算在内。

如何生成BFC区域

float的值不是none
position的值不是static或者relative。
display的值是inline-block、table、table-cell、flex、table-caption或inline-flex
overflow的值不是visible

BFC可以解决的问题

1.避免垂直方向margin合并

解决方式：用一个外围块元素包裹下方元素，设置新外层元素overflow:hidden形成BFC区域。
原理：新外层元素，变成一个BFC方式的渲染区域，就必须包裹内部子元素及子元素的margin。

缺点：如果父元素中部分自由定位的子元素，希望即使超出父元素范围，也能显示时，就冲突了。

改进方案：父元素::before{ content:””; display:table}。
改进方案原理：display:table，在子元素之前形成平级的bfc渲染区域。不允许子元素的margin进入::before范围内。
优点：既不隐藏内容，又不添加新元素，又不影响高度。
总结：
第一步：添加父元素包裹下方元素。
第二步：

父元素overflow:hidden
父元素下第一个子元素前添加空table
父元素padding代替子元素margin
父元素+透明上边框
父元素::before{ content:””; display:table }

2.左定宽，右自适应布局

解决方式：左边定宽元素左浮动: .left{ float:left; width:固定宽 }，右边元素不用右浮动，而是.right{overflow:hidden;}形成BFC区域。
原理: 右边元素overflow:hidden后，形成BFC渲染区域。左边的float元素就不能进入右边范围了。

3.防止高度坍塌

问题描述：父元素的高度都是由内部未浮动子元素的高度撑起的。如果子元素浮动起来，就不占用普通文档流的位置。父元素高度就会失去支撑，也称为高度坍塌。

方案一：为父元素设置overflow:hidden属性。

原理: CSS中的overflow :hidden属性会强制要求父元素必须包裹住所有内部浮动的元素，以及所有元素的margin范围形成BFC区域。
缺点：如果刚好父元素有些超范围的子元素内容需要显示(比如，个别position定位的子菜单项)，不想隐藏，就会发生冲突。

方案二: 在父元素内的结尾追加一个空子元素（块级元素），并设置空子元素清除浮动影响（clear:both）

原理: 利用clear:both属性和父元素必须包含非浮动的元素两个原理。
缺点: 无端多出一个无意义的看不见的空元素，影响选择器和查找元素。

方案三: 设置父元素也浮动

原理: 浮动属性也会强制父元素扩大到包含所有浮动的内部元素。
缺点: 会产生新的浮动影响。比如，父元素浮动，导致父元素之后平级的页脚div上移，被父元素挡住了。（解决: 设置父元素之后的平级元素清除浮动clear:both。）

方案四（完美解决）: 为父元素设置::after{ content:""; display:table; clear:both; height:0 }

优点：既不会影响显示隐藏，又不会影响查找元素，又不会产生新的浮动问题。
说明：个别浏览器，display:table，可能带默认高度，保险起见，再加一个属性height:0px

总结CSS形成BFC区域的作用。