浮动元素脱离文档流致后续块级元素绕行错位，clear: both 通过强制元素边框框不与浮动元素重叠来解决，但现代推荐用 display: flow-root 或 Flex/Grid 布局替代。
浮动元素导致后续元素位置异常的典型表现
当一个元素设置了 float: left 或 float: right，它会脱离文档流，其后的块级元素（如 <div>、<p>）会尝试“绕行”上去，造成视觉上被覆盖或错位——尤其在父容器高度塌陷时最明显。这不是 bug，是浮动的原始设计行为。
为什么 clear: both 能解决问题
clear 的作用是强制元素的**边框框（border box）** 不与前面浮动元素的同一侧发生重叠。clear: both 表示该元素的上下左右都不允许有浮动元素“贴边”，因此它会被推到所有浮动元素的下方，形成视觉隔离。
- 只对块级元素生效（
display: block或display: flow-root等） - 必须作用在浮动元素之后的兄弟元素上，不能加在浮动元素自己身上
- 如果浮动元素是内联的（比如
<span>），clear无效
更现代、更稳妥的替代方案
clear: both 有效但略显被动，容易漏写或写错位置。现在推荐优先用以下方式：
- 给浮动元素的**父容器**加
display: flow-root—— 这是最轻量、无副作用的清除方式，兼容性到 Chrome 64+/Firefox 58+，基本可覆盖当前主流环境 - 用
overflow: hidden或overflow: auto触发 BFC，也能撑开父容器并隔离浮动，但可能意外裁剪内容或出现滚动条 - 避免浮动布局本身：用
display: flex或display: grid替代，从根本上消除浮动带来的布局干扰
.container {
display: flow-root; /* 推荐首选 */
}
.floated-item {
float: left;
width: 200px;
}常见误用和调试技巧
加了 clear: both 却没效果？先检查这些：
立即学习“前端免费学习笔记（深入）”；
- 目标元素是否被设为
display: inline或display: inline-block？需确保是块级显示 - 是否写成了
clear: all？CSS 中没有这个值，只有left/right/both - 是否遗漏了分号，导致整条样式失效？比如
clear: both后面没加; - 是否被更高优先级的样式覆盖？用浏览器开发者工具看 computed 样式里
clear是否为both
浮动布局的边界情况多，尤其混合响应式断点时，flow-root 和 Flex/Grid 是更可控的选择。
