【CSS】BFC 块级格式化上下文

[swiftwind0405]

BFC概念

BFC（Block Formatting Context）格式化上下文，是盒模型的一种渲染布局，简言之可以理解为 一个独立的容器，不受外部影响，不影响外部。

如何触发 BFC

满足下列条件之一就可触发 BFC

• 【1】根元素，即HTML元素
• 【2】float 的值不为 none
• 【3】overflow 的值不为 visible
• 【4】display 的值为 inline-block、table-cell、table-caption
• 【5】position 的值为 absolute 或 fixed
  　

BFC布局规则

1. 内部的 Box 会在垂直方向，一个接一个地放置。
2. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
3. 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC 的区域不会与 float box 重叠。
5. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算 BFC 的高度时，浮动元素也参与计算

BFC 的作用

1. 自适应两栏布局
2. 可以阻止元素被浮动元素覆盖
3. 可以包含浮动元素——清除内部浮动
4. 分属于不同的 BFC 时可以阻止 margin 重叠

参考资料

• BFC（块级格式上下文）

[swiftwind0405]

关于对CSS中BFC的理解 - Thinktxt