* 概念：它是指一块独立的区域，只有块级元素参与。规定了内部元素如何布局，并且与外部元素不相干。 * BFC布局规则： 1. 内部box会在垂直方向一个接一个的放置 2. box垂直方向的间隔由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠 3. 计算BFC高度时，浮动元素也参与计算 4. BFC是一个独立区域，容器中的元素和外部元素互不影响 5. BFC区域不会与float box重叠 6. 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此。 * BFC产生条件： 1. 根元素 2. float值不为none 3. overflow值不为visible 4. display值为inline-block、table、table-cell、table-caption 5. position值为absolute、fixed * BFC应用 1. 清除浮动：通常子元素设置浮动之后，父元素高度会坍塌。解决办法：将父元素设置为BFC容器，设置父元素overflow:hidden; 2. 解决垂直方向上margin合并：将其中一个元素嵌套在另一个容器中，并且将这个容器设置为BFC，这样两个元素就在不同的BFC中，margin则不会发生重叠。 3. 自适应两列布局：两列布局中，左侧元素设置浮动之后，右侧元素会和左侧元素发生重叠。根据BFC布局规则第五条，我们可设置右侧元素生成BFC（overflow:hidden;），来实现自适应两列布局