块格式化上下文 (BFC)

块格式化上下文 (BFC)

概念

Formatting context(格式化上下文) ，它是页面中的一块渲染区域，并且有自己的一套渲染规则，来决定其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC, 块级格式化上下文，属于上述规范的一种。具有 BFC 特性的元素可以看作是隔离了的独立区域，容器里的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

BFC 的内部规则

• 内部的垂直方向，一个接一个放置。
• 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠。
• 元素的 margin 的左边，与父的 border 的左边相接处。
• BFC 区域不会与 float盒子 重叠。
• BFC 隔离开来的独立容器，容器里面的子元素不会影响到外面的元素。
• 计算 BFC 的高度时，浮动元素也参与计算。

触发BFC 条件

• html 跟元素
• 浮动元素： float 除 none 以外的值。
• 绝对定位： position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 hidden、auth、scroll

解决问题

触发 BFC 规范的元素，可以形成一个独立的容器, 不受外界的影响，解决一些问题。

解决 margin 重叠问题

<div><div>
<div></div>

上下margin会使得重叠，只要出发 BFC， 使得两个盒子互不影响，就可以解决 margin 重叠。

解决 margin 塌陷

<div>
    <div></div>
</div>

因为子元素 margin-top 使得父元素塌陷，我们只要使得父盒子为 BFC ，就不可以不受外面的影响。保持固定位置。

解决浮动问题

<div>
    <div></div>
</div>

子元素浮动之后，父盒子没有设置 height， 导致父容器 margin 为 0，只要给父容触发 BFC， 就可以使父元素宽度回来。

解决浮动覆盖问题。

<div></div>
<div>xxxxxxxx</div>

第一个元素浮动之后，第二个元素会被第一个元素覆盖，并且第二个元素的文字会提升起来，而不会显示到第二个盒子的左侧。 我们可以将第二个元素变为 BFC， 然后就不会受到第一个元素的影响。