解释一下BFC

[su37josephxia]

[RJM1996]

什么是 BFC

BFC 全称：Block Formatting Context （块级格式化上下文）= block-level box + Formatting Context

block-level box 即为块级元素，与之对应的即为行内元素 inline-level box

BFC 是一个独立的渲染区域，只有块级元素参与， 它规定了内部的块级元素如何布局，并且这个区域与外部完全隔离，不会互相影响

如何生成 BFC

CSS2.1 中规定满足下列 CSS 声明之一的元素会生成 BFC：

• 根元素
• float 的值不为 none
• overflow 的值不为 visible
• display 的值是 inline-block、flex、inline-flex、table-cell、table-caption
• position 的值不是 static、relative

BFC 的布局规则

1、默认内部的块级元素会在垂直方向一个接一个地放置，每个块级元素独占一行

2、属于同一个 BFC 的两个相邻块级元素在垂直方向上的 margin 会发生重叠，以较大的那个为准，但水平方向的不会

3、BFC 的区域不会与 float 的元素区域重叠

4、计算 BFC 的高度时，内部浮动子元素也参与计算

BFC 的应用

1、防止两个块级元素的 margin 重叠：因为两个 BFC 区域互不影响

2、清除内部元素浮动：因为 BFC 区域计算高度时，内部浮动元素也参与计算

3、自适应两三栏布局：因为 BFC 的区域不会与 float 的元素区域重叠

总结

BFC 就是页面上一个完全隔离的独立容器，容器里的元素和外界不会互相影响。

[zcma11]

bfc 会形成一个独立的块级区域，能够不与其他元素重叠，例如能够解决 margin 重叠的问题。bfc 的计算也包含浮动元素，所以bfc 也可以清除浮动导致的高度塌陷。

[7TingYu]

BFC

块级格式化上下文

其有以下特点：

• 独立渲染区域
• 外部不影响内部
• 内部不影响外部

4种情况可以形成BFC渲染区域

• float的值不是none
• position的值不是static或者relative。
• display的值是inline-block、table-cell、flex、table-capttion或者inline-flex
• overflow的值不是visible

[QbjGKNick]

什么是 BFC

BFC(Block Formatting Content) 块级格式化上下文，它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level box 如何布局，并且与这个区域外部毫不相干。

如何创建 BFC

• float 的值不是 none；
• position 的值不是 static 或者 relative；
• display 的值是 inline-block、table-cell、flex、table-caption 或者 inline-flex
• overflow 的值不是 visible

BFC 的作用

• 利用 BFC 避免 margin 重叠
• 清除浮动
• 自适应两栏布局