概念

BFC（块级格式化上下文）是 CSS 中的一个概念，用于描述元素在布局时的一种独立的渲染区域。BFC 决定了元素如何相互影响和相互定位，并可以解决一些常见的布局问题。

作用

以下是一些 BFC 的特性和作用：

  1. 清除浮动：当一个元素内部包含浮动元素时，该元素的 BFC 可以清除浮动，使得其正确地包裹浮动元素，而不发生高度塌陷的情况。

  2. 垂直边距折叠：在同一个 BFC 内部，相邻的块级元素的垂直边距会发生折叠，即取较大的边距值作为最终的边距值。

  3. 定位和布局控制：BFC 可以使元素在布局时相互隔离，内部元素的布局不受外部元素的影响，可以防止 margin 重叠、包含浮动等问题。

  4. 避免文字环绕：当一个元素包含浮动元素时，元素的 BFC 可以避免文字环绕浮动元素，使得文字排列在浮动元素的下方而不是环绕其周围。

怎么触发

触发 BFC 的条件：

  • 根元素（<html>）

  • float 属性不为 none

  • position 属性为 absolute 或 fixed

  • display 属性为 inline-block、table-cell、table-caption、flex、inline-flex 中的任意值

  • overflow 属性不为 visible

要创建一个 BFC，可以通过以下方式：

  • 设置元素的 overflow 属性为除 visible 以外的值，例如 auto、hidden 等。

  • 使用 float 属性对元素进行浮动。

  • 使用绝对定位（position: absolute 或 position: fixed）。

BFC 是一个非常有用的概念，可以在布局时解决一些常见的问题，并控制元素的定位和排列。了解和应用 BFC 可以提高网页布局的灵活性和可靠性。