BFC浅谈

# 一：什么是BFC?

在W3C规范中，浮动元素和绝对定位元素，非块级盒子的块级容器（例如：inline-block, table-ceils和table-captions）,以及overflow值不为“visiable”的块级元素，都会为他们的内容创建新的BFC，就是block formatting context的缩写(块级格式上下文)。

在一个块级格式上下文中，盒模型在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直由‘margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。

在一个块格式化上下文中，每个盒的left外边挨着包含块的left边。即使存在浮动，这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）

总而言之：BFC内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。

# 二. BFC的功能。

功能一：用BFC包住浮动元素。

功能二：兄弟之间划清界限。