CSS 浮动清除原理：`clearfix`与BFC清除浮动的底层机制差异

大家好，今天我们来深入探讨CSS浮动清除的原理，重点对比clearfix和BFC（Block Formatting Context，块级格式化上下文）两种清除浮动方法的底层机制差异。浮动是CSS布局中一个重要的概念，但如果不加以控制，很容易引起布局混乱。因此，掌握清除浮动的技巧至关重要。

浮动的本质和问题

在理解浮动清除之前，我们首先要明白浮动的本质。当一个元素被设置为float: left或float: right时，该元素会脱离正常的文档流。这意味着：

不再占据标准文档流的空间：浮动元素就像漂浮在页面之上，其后面的元素会向上移动，占据浮动元素原本的位置。
影响行内元素：行内元素会围绕浮动元素进行排列，形成文字环绕的效果。
父元素高度塌陷：如果一个父元素的所有子元素都是浮动的，那么父元素的高度会塌陷为零。这是因为父元素无法检测到浮动子元素的高度，导致父元素失去了对子元素的包裹能力。

以下代码演示了父元素高度塌陷的问题：

<!DOCTYPE html>
<html>
<head>
<title>浮动演示</title>
<style>
  .container {
    border: 2px solid red; /* 为了明显，添加边框 */
  }

  .float-item {
    float: left;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
  }
</style>
</head>
<body>

<div class="container">
  <div class="float-item"></div>
  <div class="float-item"></div>
</div>

</body>
</html>

在这个例子中，.container的高度会塌陷，因为它的子元素.float-item都是浮动的。这会导致.container的边框紧贴在一起，无法包裹住浮动元素。

`clearfix` 的工作原理

clearfix 是一种常用的清除浮动的方法。它通过在父元素的末尾插入一个伪元素，并使用 clear 属性来清除浮动。clear 属性指定一个元素是否允许在其周围存在浮动元素。

常见的 clearfix 实现方式如下：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

让我们分解一下这段代码：

content: "";: 创建一个空的伪元素。伪元素默认是行内元素，需要设置display属性才能改变其类型。
display: block;: 将伪元素设置为块级元素。块级元素会独占一行，并且可以设置宽度和高度。
clear: both;: 这是关键的一步。clear: both 意味着该元素的顶部和底部都不允许存在浮动元素。因此，这个伪元素会被强制移动到所有浮动元素的下方，从而撑开父元素的高度，解决高度塌陷问题。

clearfix 的本质是在浮动元素的父元素内部，通过添加一个非浮动元素，该元素受到 clear: both 的影响，使得父元素可以正确计算高度，从而包裹住浮动元素。

以下代码演示了如何使用 clearfix 来清除浮动：

<!DOCTYPE html>
<html>
<head>
<title>clearfix演示</title>
<style>
  .container {
    border: 2px solid red; /* 为了明显，添加边框 */
  }

  .float-item {
    float: left;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
</style>
</head>
<body>

<div class="container clearfix">
  <div class="float-item"></div>
  <div class="float-item"></div>
</div>

</body>
</html>

在这个例子中，我们给 .container 添加了 clearfix 类。现在，.container 的高度会正确地包裹住浮动子元素。

BFC 的工作原理

BFC (Block Formatting Context) 块级格式化上下文，是一个独立的渲染区域，它规定了内部的块级盒子如何布局。一个元素如果形成了 BFC，那么它就拥有了以下特性：

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

关键就在于第6条，BFC 会计算浮动元素的高度。这意味着，如果一个父元素形成了 BFC，那么它就可以自动包裹住浮动子元素，从而避免高度塌陷问题。

以下是一些常见的触发 BFC 的方式：

根元素 (<html>)
float 属性不为 none 的元素
position 属性为 absolute 或 fixed 的元素
display 属性为 inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid 的元素
overflow 属性不为 visible 的元素 (例如 overflow: hidden, overflow: auto, overflow: scroll)

以下代码演示了如何使用 overflow: hidden 来触发 BFC，从而清除浮动：

<!DOCTYPE html>
<html>
<head>
<title>BFC演示</title>
<style>
  .container {
    border: 2px solid red; /* 为了明显，添加边框 */
    overflow: hidden; /* 触发BFC */
  }

  .float-item {
    float: left;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
  }
</style>
</head>
<body>

<div class="container">
  <div class="float-item"></div>
  <div class="float-item"></div>
</div>

</body>
</html>

在这个例子中，我们给 .container 添加了 overflow: hidden，使其形成了 BFC。现在，.container 的高度会正确地包裹住浮动子元素。

`clearfix` 与 BFC 的对比

特性	`clearfix`	BFC
原理	通过在父元素末尾添加一个伪元素，并使用 `clear: both` 来清除浮动。	通过触发 BFC，使父元素能够计算浮动元素的高度，从而包裹住浮动元素。
实现方式	需要添加额外的 CSS 代码，通常是一个 `::after` 伪元素。	可以通过多种方式触发，例如 `overflow: hidden`，`display: inline-block`，`position: absolute` 等。选择哪种方式取决于具体的布局需求。
副作用	几乎没有副作用。	不同的 BFC 触发方式可能会带来不同的副作用。例如，`overflow: hidden` 可能会隐藏超出容器的内容，`display: inline-block` 可能会改变元素的显示方式，`position: absolute` 可能会使元素脱离文档流。需要根据实际情况进行选择。
适用场景	通用性强，几乎适用于所有需要清除浮动的场景。	适用于父元素本身就需要具有 BFC 特性的场景。例如，如果父元素需要设置 `overflow: hidden` 来处理内容溢出，那么就可以顺便利用 BFC 来清除浮动。
兼容性	兼容性好，几乎所有现代浏览器都支持 `::after` 伪元素和 `clear` 属性。	兼容性好，所有现代浏览器都支持 BFC。
代码量	需要添加较少的 CSS 代码。	可能不需要添加额外的 CSS 代码，如果父元素本身就需要设置某些 BFC 触发属性。
语义化	相对较好， `clearfix` 类名清晰地表达了其作用。	可能较差，因为 BFC 触发属性本身可能与清除浮动无关，容易造成混淆。例如，使用 `overflow: hidden` 来清除浮动，但其主要目的是处理内容溢出，而不是清除浮动。

总而言之，clearfix 是一种专门用于清除浮动的解决方案，而 BFC 是一种更广泛的布局概念，它可以顺带解决浮动问题。在选择清除浮动的方法时，应该根据具体的场景和需求进行权衡。如果只需要清除浮动，并且不希望引入额外的副作用，那么 clearfix 是一个不错的选择。如果父元素本身就需要具有 BFC 特性，那么就可以利用 BFC 来清除浮动，从而减少代码量。

最佳实践建议

优先使用 clearfix: 在大多数情况下，clearfix 是一个简单、可靠、通用的清除浮动方法。
谨慎使用 BFC: 在使用 BFC 清除浮动时，要仔细考虑 BFC 触发属性的副作用。确保该属性不会对布局产生负面影响。
语义化: 尽量使用语义化的类名，例如 clearfix，来清晰地表达代码的作用。
避免过度使用浮动: 现代 CSS 布局技术，例如 Flexbox 和 Grid，可以更好地解决复杂的布局问题，应该尽量避免过度使用浮动。
了解不同浏览器的兼容性: 虽然现代浏览器对clearfix 和 BFC 都有很好的支持，但是在开发过程中仍然需要注意不同浏览器的兼容性问题。特别是需要兼容一些比较老的浏览器的时候。

深入理解BFC的渲染机制

为了更深入地理解 BFC 的工作原理，我们需要了解一些 CSS 渲染机制。当浏览器渲染一个页面时，它会将 HTML 元素转换成一个个的盒子（box）。每个盒子都有自己的大小、位置和属性。浏览器会根据 CSS 规则来计算这些盒子的布局，并将它们渲染到屏幕上。

BFC 是 CSS 渲染过程中的一个重要概念。它定义了一个独立的渲染区域，这个区域内的元素布局不会受到外部元素的影响，反之亦然。BFC 的主要作用是隔离布局，防止元素之间的相互干扰。

当一个元素形成 BFC 时，浏览器会按照以下步骤来计算它的布局：

计算 BFC 的包含块: BFC 的包含块是指包含该 BFC 的最近的块级祖先元素。BFC 的大小和位置会受到其包含块的影响。
计算 BFC 内部盒子的布局: BFC 内部的盒子会按照垂直方向一个接一个地放置。每个盒子的左外边缘与其包含块的左边缘相接触。盒子之间的垂直距离由 margin 属性决定。
计算 BFC 的高度: BFC 的高度由其内部所有盒子的高度总和决定。如果 BFC 内部存在浮动元素，那么浮动元素的高度也会被计算在内。

正是因为 BFC 会计算浮动元素的高度，所以它可以解决父元素高度塌陷的问题。当一个父元素形成 BFC 时，它就可以自动包裹住浮动子元素，从而避免高度塌陷。

浮动清除与页面布局的实践

浮动清除不仅仅是解决高度塌陷的问题，它还与页面布局息息相关。合理的浮动清除可以使页面布局更加灵活和可控。

例如，我们可以使用浮动和 BFC 来实现多列布局。以下代码演示了如何使用浮动和 overflow: hidden 来实现一个简单的两列布局：

<!DOCTYPE html>
<html>
<head>
<title>两列布局</title>
<style>
  .container {
    width: 600px;
    margin: 0 auto;
  }

  .left-column {
    float: left;
    width: 200px;
    background-color: lightblue;
  }

  .right-column {
    overflow: hidden; /* 触发BFC */
    background-color: lightgreen;
  }
</style>
</head>
<body>

<div class="container">
  <div class="left-column">
    <p>左侧栏内容</p>
  </div>
  <div class="right-column">
    <p>右侧栏内容</p>
  </div>
</div>

</body>
</html>

在这个例子中，.left-column 被设置为 float: left，使其浮动到左侧。.right-column 被设置为 overflow: hidden，使其形成 BFC。由于 BFC 不会与浮动元素重叠，所以 .right-column 会自动排列在 .left-column 的右侧。这样就实现了一个简单的两列布局。

小结

clearfix 通过添加伪元素和 clear 属性来清除浮动，通用性强，副作用小。BFC 通过触发块级格式化上下文，使父元素能够计算浮动元素的高度，从而包裹住浮动元素，但可能带来一些副作用。理解它们的原理，选择合适的方法可以有效地解决浮动问题，构建更加灵活和可控的页面布局。记住，优先选择 clearfix，谨慎使用 BFC，并始终关注语义化和兼容性。

更多IT精英技术系列讲座，到智猿学院