CSS 浮动与清除

在 Flexbox 和 Grid 布局出现之前，float (浮动) 是 CSS 中用于创建多列布局和实现图文环绕效果的主要技术。尽管现在有了更好的现代布局工具，但理解 float 仍然很重要，因为你可能会在旧代码中遇到它，而且它在某些特定场景下（如图文环绕）依然有用。

float 属性

float 属性可以使一个元素脱离正常的文档流，并将其移动到其容器的左侧或右侧。

• float: left;: 元素向左浮动。
• float: right;: 元素向右浮动。
• float: none;: (默认) 元素不浮动。

当一个元素浮动后，它后面的内容（如文本）会环绕着它。

img {
  float: right;
  margin: 0 0 10px 10px; /* 给图片添加一些外边距 */
}

浮动元素带来的问题：容器高度塌陷

当一个容器内的所有子元素都浮动时，这些子元素会脱离文档流。容器会认为自己内部没有任何内容，导致其高度变为 0。这就是所谓的“高度塌陷”。这会破坏后续元素的布局。

<div class="container">
  <div class="box" style="float: left;">Box 1</div>
  <div class="box" style="float: left;">Box 2</div>
</div>
<p>这段文字本应在容器下方，但现在会上移。</p>

clear 属性

clear 属性用于指定一个元素的侧面不应有浮动元素。它用于“清除”浮动带来的影响，解决高度塌陷问题。

• clear: left;: 元素的左侧不允许有浮动元素。
• clear: right;: 元素的右侧不允许有浮动元素。
• clear: both;: 元素的左右两侧都不允许有浮动元素。这是最常用的值。

解决高度塌陷的方法

有几种方法可以清除浮动并解决容器高度塌陷问题。

1. 使用空的 div

在浮动元素的末尾、容器闭合标签之前，添加一个空的 div 并为其设置 clear: both;。

<div class="container">
  <div class="box">...</div>
  <div class="box">...</div>
  <div style="clear: both;"></div>
</div>

这种方法有效，但会添加无意义的 HTML 元素，不推荐。

2. overflow 属性

为浮动元素的父容器设置 overflow: auto; 或 overflow: hidden;。这会创建一个新的块级格式化上下文 (Block Formatting Context)，从而“包裹”住内部的浮动元素，防止高度塌陷。

.container {
  overflow: auto;
}

这是一种简单有效的方法。

3. 清除浮动微调 (Clearfix Hack)

这是最现代、最推荐的方法。它使用 ::after 伪元素来在容器的末尾添加一个不可见的、用于清除浮动的内容。

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

然后，你只需将 clearfix 类添加到任何包含浮动元素的容器上即可。

<div class="container clearfix">
  <div class="box">...</div>
  <div class="box">...</div>
</div>

虽然现代布局主要使用 Flexbox 和 Grid，但了解 float 和 clear 的工作原理，可以帮助你更好地理解 CSS 布局的历史演变和处理一些遗留问题。