块级上下文（BFC）

块级上下文（BFC）

BFC(block formatting context)是W3C CSS2.1规范中的一个概念，他决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

Box是CSS布局中的对象和基本单位。元素的类型和display属性决定了Box的类型。盒子的类型有：

• block-level box（块级盒）
• inline-level box（行内盒）
• run-in box（CSS3提出）

BFC布局的规则

• 包含浮动元素。BFC区域不会与浮动元素重叠。
• 属于同一BFC的两个相邻Box的margin会发生重叠
• 浮动元素也参与BFC的计算
• BFC中子元素不影响外面的元素

触发BFC的几种方式

• 浮动元素，float 除 none 以外的值
• 绝对定位元素，position（absolute，fixed）
• display 为以下其中之一的值 inline-blocks，table-cells，table-captions
• overflow 除了 visible 以外的值（hidden，auto，scroll）
• 根元素
• display 的 table-caption 值(CSS3中增加)

BFC作用

• 清除内部浮动
• 防止垂直 margin 重叠
• 阻止元素被浮动元素覆盖

---