大家好，我是IT修真院上海分院1期的Web学员刘洪利，今天给大家分享一下BFC(BLOCK FORMATTING CONTEXT)及其如何工作

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

什么是BFC

Block Formatting Context，中文直译为块级格式上下文。

BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。

这里也间接指出了垂直相邻盒子margin合并的解决办法：就是给这两个盒子也创建BFC。

通俗一点，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

2.知识剖析

BFC的作用

1. 清除内部浮动

我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。

demo

2. 垂直margin合并

在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠的结果：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。这个同样可以利用BFC解决。

demo

3. 创建自适应两栏布局

在很多网站中，我们常看到这样的一种结构，左图片+右文字的两栏结构。

demo

如何创建BFC

float属性不为none

overflow不为visible(可以是hidden、scroll、auto)

position为absolute或fixed

display为inline-block、table-cell、table-caption

3.常见问题

1、Block Formatting Context可以阻止边距折叠（margin collapsing）。

2、Block Formatting Context可以包含内部元素的浮动。

3、Block Formatting Context可以阻止元素被浮动覆盖

4.解决方案

利用 clear属性，清除浮动使父容器形成BFC

5.编码实战

.container{ margin: 30px auto; width:600px; height: 300px; clear: both; }

.p{ border:solid 3px #a33; }

.c{ width: 100px; height: 100px; background-color: #060; margin: 10px; float: left; }

.floatfix{ zoom:1; }

.floatfix:after{ content:""; display:table; clear:both; }

html部分

自适应两栏布局、

body { width: 300px; position: relative; }

.aside { width: 100px; height: 150px; float: left; background: #f66; }

.main { height: 200px; background: #fcc; }