float元素脱离文档流致父容器塌陷，后续内容“跑上来”；clear: both强制元素在所有浮动后显示，需加于浮动后的块级兄弟元素，配合BFC或伪元素.clearfix更可靠；新项目推荐Flex/Grid布局。

float 元素后面的内容为什么会“跑上来”

因为 float 会让元素脱离普通文档流，父容器高度塌陷，后续兄弟元素就“看不见”前面的浮动块，自然从顶部开始排布——这不是 bug，是 CSS 规范定义的行为。

clear: both 能解决什么问题

它强制当前元素**不与任何方向的浮动元素相邻**，也就是让该元素“等前面所有浮动元素结束之后再开始显示”。常见于浮动导航栏、侧边栏之后的主内容区。

• clear: left：只避开左边浮动
• clear: right：只避开右边浮动
• clear: both：左右都避开（最常用）
• clear: none：默认值，不避开任何浮动

用 clear both 的三种典型写法和坑点

不是加了 clear: both 就一定生效，关键看加在谁身上、怎么加：

• 加在浮动元素的**后一个兄弟块级元素**上才有效（比如 ），加在浮动元素自己身上无效
• 如果目标元素是 inline 或 inline-block，clear 不起作用，必须是块级元素（display: block 或 table 等）
• 父容器没设高度时，仅靠子元素 clear 无法撑开父容器——这时需要触发 BFC（比如加 overflow: hidden）或用伪元素清除

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
/* 这样加在父容器上，比每个地方都写 clear: both 更可靠 */

现代替代方案要不要现在就换

如果只是老项目维护，clear: both 完全够用；但新项目建议直接用 display: flex 或 display: grid 布局——它们天然规避浮动塌陷问题，语义更清晰，响应式也更容易控制。

不过要注意：某些 IE8–9 场景下仍需 float + clear 回退方案，这时候别硬套 Flex，反而增加兼容性负担。