CSS清除浮动：防止后续元素被顶走

浮动元素脱离文档流导致父容器高度塌陷，是CSS布局中常见的陷阱。后续内容可能被“顶走”，根源在于父容器未能包裹浮动子元素。这种行为并非Bug，而是CSS规范的设计。关键在于理解：父容器塌陷后，其布局位置发生改变，后续元素会自然向上移动。clear: both 仅用于阻止自身与前面浮动元素紧贴，但无法解决父容器塌陷。真正有效的方案是创建BFC（块级格式化上下文），例如使用 overflow: hidden 或 display: flow-root。

浮动元素为什么会让后续内容“被顶走”

原因在于：浮动元素脱离普通文档流，父容器高度会塌陷为0（如果仅包含浮动子元素）。后续块级元素会依据塌陷后的父容器位置向上移动，从而出现在浮动元素旁边或下方的空隙中。这并非Bug，而是CSS布局的正常表现。父容器未能将浮动子元素“容纳”在内，后续内容自然按照塌陷后的父容器位置重新排列。

clear: both 为什么经常失效

clear: both 的作用仅限于自身，它能阻止上边界紧贴前面的浮动元素，但无法解决父容器塌陷。常见误区是在最后一个浮动元素后添加

，此时父容器高度依然为0，后续内容仍然错位。需注意以下三个必要条件：

• 清除元素必须紧跟浮动元素之后，且为块级、未浮动；
• 若清除元素设置为 display: inline 或 float: left，clear 将失效；
• 清除元素不能使用绝对定位（position: absolute），否则脱离文档流，清除行为不会触发。

推荐用 overflow: hidden 清除浮动的条件

为浮动元素的直接父容器设置 overflow: hidden（或 auto、scroll）是简洁的方案，其原理是通过创建BFC强制父容器包含所有浮动子元素。此方法仅适用于父容器无需显示溢出内容的场景——设置 hidden 后，超出宽高的部分会被裁剪。此外需注意：

• overflow: auto 在部分旧版Safari中可能意外触发滚动条，overflow: hidden 更为稳妥；
• 不能与 position: absolute 或 transform 同时用于同一父容器（尤其在老浏览器中，BFC创建可能受到干扰）。

现代项目优先用 display: flow-root

display: flow-root 是专为清除浮动设计的新属性，效果等同于创建BFC，语义明确且无副作用，不影响溢出行为。兼容性方面：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+；若需支持IE或老旧Safari，仍需使用 overflow: hidden。相比伪元素清除法，display: flow-root 更简洁，无需额外HTML或CSS hack。但注意避免与 display: inline-block 混用，后者虽能创建BFC，但会引入基线对齐和空白间隙问题。

实际项目中，若父容器样式简单且无需溢出处理，overflow: hidden 是最快方案；若需长期维护且目标浏览器较新，display: flow-root 是最干净的选择。伪元素清除（::after { content: ""; display: table; clear: both; }）目前仅作为老旧环境的兜底方案。