BFC布局规则

BFC布局规则如下：

1. 内部的Box会在垂直方向上一个接一个的放置。
2. 内部的Box垂直方向上的距离由margin决定，要注意的是BFC内的块级元素依然会有外边距折叠，但可以在元素外用BFC来包裹，解决相邻元素间外边距折叠问题。
3. BFC的区域不会与float的元素区域重叠。
4. 计算BFC的高度时，浮动子元素也参与计算。意味着可以利用BFC解决浮动带来的高度塌陷的文通。
5. BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。意味着可以用给父元素设置BFC，解决margin-top塌陷的问题。