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 就一定生效，关键看加在谁身上、怎么加：
- 加在浮动元素的**后一个兄弟块级元素**上才有效（比如
<div class="main">），加在浮动元素自己身上无效 - 如果目标元素是
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，反而增加兼容性负担。
