# 一:什么是BFC?
在W3C规范中,浮动元素和绝对定位元素,非块级盒子的块级容器(例如:inline-block, table-ceils和table-captions),以及overflow值不为“visiable”的块级元素,都会为他们的内容创建新的BFC,就是block formatting context的缩写(块级格式上下文)。
在一个块级格式上下文中,盒模型在竖直方向一个接一个地放置,从包含块的顶部开始。两个兄弟盒之间的竖直由‘margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。
在一个块格式化上下文中,每个盒的left外边挨着包含块的left边。即使存在浮动,这也成立。除非该盒建立了一个新的块格式化上下文(这种情况下,该盒自身可能会因为浮动变窄)
总而言之:BFC内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。
# 二. BFC的功能。
功能一:用BFC包住浮动元素。
功能二:兄弟之间划清界限。