浮动元素脱离文档流致后续块级元素绕行错位，clear: both 通过强制元素边框框不与浮动元素重叠来解决，但现代推荐用 display: flow-root 或 Flex/Grid 布局替代。
浮动元素导致后续元素位置异常的典型表现
当一个元素设置了 加了 立即学习“前端免费学习笔记（深入）”； 浮动布局的边界情况多，尤其混合响应式断点时，float: left 或 float: right，它会脱离文档流，其后的块级元素（如 ）会尝试“绕行”上去，造成视觉上被覆盖或错位——尤其在父容器高度塌陷时最明显。这不是 bug，是浮动的原始设计行为。
为什么
clear: both 能解决问题clear 的作用是强制元素的**边框框（border box）** 不与前面浮动元素的同一侧发生重叠。clear: both 表示该元素的上下左右都不允许有浮动元素“贴边”，因此它会被推到所有浮动元素的下方，形成视觉隔离。
display: block 或 display: flow-root 等）），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 后面没加 ;
clear 是否为 both
flow-root 和 Flex/Grid 是更可控的选择。
