深入理解 CSS 浮动 (Float)

在 Flex 和 Grid 布局之前，浮动 (Float) 是 CSS 中实现多列布局的核心支柱。虽然现代开发中我们不再依赖它来做整体架构，但理解浮动的机制及其带来的副作用（以及如何解决），依然是夯实 CSS 基础的必修课。

浮动的初衷与特性

浮动最初被设计出来的唯一目的，是为了实现文本环绕图片的效果，就像报纸上的排版一样。

核心特性

当为一个元素设置 float 时，它会表现出以下特性：

• 脱离标准文档流：元素会被移出正常的文档流，向左或向右平移，直到它的外边缘碰到包含块或另一个浮动元素的边缘。
• 文字环绕：虽然它脱离了文档流，但文本内容（行内元素）会“察觉”到它的存在，并围绕着它排列，这就是著名的“文字环绕”效果。
• 块状化：行内元素（如 <span>）设置浮动后，会隐式地变成块级元素（拥有宽高的特性）。

浮动的致命副作用

高度塌陷

条件： 如果一个父元素没有显式设置高度，且其内部的所有子元素都设置了浮动。

现象描述： 因为浮动元素脱离了文档流，父元素在计算自身高度时，无法将其包含在内,最终导致父元素高度变为 0。 从而使得父元素后面的正常元素发生错位，跑到了浮动元素的下方。

清除浮动 (闭合浮动) 的三大方案

为了解决高度塌陷，我们需要“清除浮动”（更准确的说法是“闭合浮动”，即强迫父元素包含其浮动的子元素）。

触发 BFC (最干脆)

计算 BFC 的高度时，浮动元素也参与计算。因此，只要让父元素触发 BFC 即可。

.parent {
    /* 经典触发方式 */
    overflow: hidden;
    /* 或者使用更现代、无副作用的属性 */
    display: flow-root;
}

优点：代码极简。 缺点：使用 overflow: hidden 时，如果子元素需要超出父容器显示（如 tooltip），会被直接裁剪，导致 bug。

Clearfix 万能清除法 (最经典、最推荐)

其原理是利用 CSS 伪元素 ::after 在父元素的最后插入一个隐形的块级元素，并对其使用 clear: both 属性。 clear: both 的作用是：要求该元素的顶部边缘必须低于其前面所有浮动元素的底部边缘。这样就能硬生生地把父元素给撑开。

/* 将此工具类添加到需要清除浮动的父元素上 */
.clearfix::after {
    content: ""; /* 必须有 content，哪怕是空的 */
    display: block; /* 必须是块级元素 */
    clear: both; /* 核心：清除左右两边的浮动 */
    height: 0; /* 隐藏该元素 */
    visibility: hidden; /* 彻底不可见 */
}

添加空 div (最古老，不推荐)

在父容器的末尾直接加一个空的 HTML 标签，并设置 clear: both。

<div class="parent">
    <div style="float: left;"></div>
    <div style="clear: both;"></div>
</div>

缺点：增加了无意义的 DOM 节点，违背了结构与表现分离的原则，已淘汰。

建议

在今天的 Web 开发（包括 uni-app 开发）中：

• 整体布局：请坚决拥抱 Flexbox 和 Grid。它们天生具备优秀的对齐、包裹和空间分配能力，完全不需要浮动。

• 浮动的回归：让浮动回归它的初心——当你确实需要实现**“文字环绕图片”或“首字母下沉”**效果时，才使用 float。

• 老代码维护：如果你在维护老代码或接手使用了 float 布局的组件，请优先使用 .clearfix 方案来处理高度塌陷问题。