CSS 浮动

CSS 浮动 (Float) 与清除 (Clearing)

CSS 中的 float 属性传统上用于创建布局，但其主要的现代用途是让文本环绕元素，通常是图片。理解 float 以及如何“清除”浮动 (clear floats) 仍然很重要。

什么是 CSS `float`？

float 属性指定一个元素应从正常的文档流 (normal document flow) 中取出，并向其容器的左侧或右侧移动。其他内容（如文本）将环绕浮动元素。

float 的可能取值：

left：元素向其容器的左侧浮动。
right：元素向其容器的右侧浮动。
none：元素不浮动（默认值）。
inherit：元素继承其父元素的 float 值。

示例：浮动图片

float 的一个常见用例是使文本环绕图片：

img.thumbnail {
  float: left;
  width: 150px;
  height: auto;
  margin-right: 15px; /* 图片与文本之间的空间 */
  margin-bottom: 5px; /* 如果文本较短，则图片下方留白 */
}

/* HTML 结构大致如下：
<p>
  <img src="image.jpg" alt="缩略图" class="thumbnail">
  这段文本将环绕浮动图片。如果文本足够多，
  它会继续在图片旁边显示，一旦超出图片高度后，
  它将流到图片下方。...
</p>
*/

`clear` 属性

当元素浮动时，正常流中的后续元素将环绕它们。有时，你希望某个元素出现在浮动元素的下方，而不是旁边。这时就需要使用 clear 属性。

clear 属性指定了元素哪一侧不允许出现浮动元素。

clear: left;：元素的顶部边缘将被移动到其前面所有左浮动元素的下方。
clear: right;：元素的顶部边缘将被移动到其前面所有右浮动元素的下方。
clear: both;：元素的顶部边缘将被移动到其前面所有左浮动和右浮动元素的下方。
clear: none;：没有清除效果（默认）。
clear: inherit;：继承其父元素的 clear 值。

示例：清除浮动以显示页脚

.content-with-floats {
  /* ... 包含浮动元素 ... */
}

.footer {
  clear: both; /* 确保页脚出现在所有浮动内容下方 */
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

包含浮动元素（“Clearfix”问题）

float 的一个常见问题是，如果父元素只包含浮动的子元素（或者浮动的子元素高于父元素内任何非浮动内容），父元素的高度会塌陷 (collapse)，如同它是空的。这可能破坏布局。

包含浮动元素的现代解决方案：

1. `display: flow-root;`

使父元素包含其浮动子元素的最简单、最现代的方法是在父元素上设置 display: flow-root;。这会创建一个新的块级格式化上下文 (block formatting context)，使父元素扩展以包含浮动元素。

.parent-container {
  display: flow-root;
  border: 1px solid blue; /* 为了可视化其边界 */
}

.parent-container .floated-child {
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  margin: 5px;
}

2. 伪元素 Clearfix（传统方法但仍常见）

在 display: flow-root; 得到广泛支持之前，一种常见的技术是伪元素 clearfix：

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

/* 将此 class 应用于父容器：
<div class="parent-container clearfix">
  <div class="floated-child">...</div>
</div>
*/

3. `overflow: auto;` 或 `overflow: hidden;`（有注意事项）

在父元素上设置 overflow 为 visible 以外的值（例如 auto 或 hidden）也会创建新的块级格式化上下文并包含浮动元素。然而，如果不小心使用，这有时可能导致出现不必要的滚动条 (scrollbars) 或内容被裁剪 (content clipping)。

浮动用于布局（历史背景）

历史上，float 被大量用于创建多列页面布局。虽然可行，但这通常需要复杂的清除策略，并且可能不够健壮。

现代 CSS 为布局提供了更好的工具，例如 Flexbox 和 CSS Grid，它们通常比 float 更适合用于整体页面结构。然而，理解 float 对于处理遗留代码 (legacy code) 以及其原本的文本环绕目的仍然有价值。

所有 CSS `float` 和 `clear` 属性

属性	描述	值
`float`	指定元素是否应该从正常流中浮动出来。	left \| right \| none \| inherit
`clear`	指定元素哪一侧不允许浮动元素出现。	none \| left \| right \| both \| inherit