浅析BFC及其做用

1、什么是BFC
BFC(block formatting context）：简单来讲，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互做用。
中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其余元素的关系和相互做用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照必定规则进行布局不会影响到其它环境中的布局。好比浮动元素会造成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。 也就是说，若是一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子创建了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫作 Flow Root）

2、 造成 BFC 的条件
一、浮动元素，float 除 none 之外的值；
二、绝对定位元素，position（absolute，fixed）；
三、display 为如下其中之一的值 inline-blocks，table-cells，table-captions；
四、overflow 除了 visible 之外的值（hidden，auto，scroll）

3、BFC常见做用
一、包含浮动元素
问题案例：高度塌陷问题：在一般状况下父元素的高度会被子元素撑开，而在这里由于其子元素为浮动元素因此父元素发生了高度坍塌，上下边界重合。这时就能够用bfc来清除浮动了。

二、不被浮动元素覆盖
问题案例： div浮动兄弟遮盖问题：因为左侧块级元素发生了浮动，因此和右侧未发生浮动的块级元素不在同一层内，因此会发生div遮挡问题。能够给蓝色块加 overflow: hidden，触发bfc来解决遮挡问题。

三、 BFC 会阻止外边距折叠
问题案例：margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。能够用overflow：hidden产生bfc来解决。