clear: both加在文本容器上才有效，因为该属性只作用于当前块级元素自身外边距，使其避开紧邻的同级浮动兄弟；加在浮动元素自身或父容器上均无效。
直接加 clear: both 到后方文本容器上，通常就能立刻止住重叠——但前提是它得是浮动元素的下一个兄弟块级元素。
为什么 clear: both 加在文本上才有效
clear 不是“清掉浮动”，而是告诉**当前元素**：“你不准紧贴左侧/右侧/两侧的浮动元素”。它只作用于自身外边距，对浮动元素自己、父容器或非块级元素完全无效。
- 一张
float: left的图片后面跟一个<p>，就给这个<p>加clear: both - 侧边栏
float: left，主内容区是<main>，那就给<main>加clear: left（比both更精准） - 给浮动元素自己加
clear: both—— 完全无意义，它已经浮起来了 - 给父容器加
clear—— 无效，它不是浮动元素的兄弟，而是祖先
父容器高度塌陷才是根源，clear 只是补丁
你看到的“文字重叠”，其实是父容器高度为 0 后，文字行框从浮动元素底部起排——根本没给它留出正常空间。调 line-height 或 margin-bottom 都压不住，因为文档流本身已断裂。
- 检查开发者工具里父容器的
Computed → height：若为0px或远小于预期，基本可确认塌陷 - 触发 BFC 是更彻底的解法：
display: flow-root（推荐）、overflow: hidden（慎用，会裁剪下拉菜单、阴影等） -
overflow: hidden在打印预览中也会失效，@media print中需显式重置float: none
现代项目该怎么做：优先绕过 float 本身
浮动本就不是为布局设计的，而是为图文环绕服务的。用它做结构布局，等于在修一条不断漏水的管道。
立即学习“前端免费学习笔记（深入）”；
- 主内容+页脚沉底？用
display: flex; flex-direction: column+flex: 1替代所有清除 hack - 多栏卡片网格？
display: grid+grid-template-columns天然不塌陷、响应式友好 - 必须兼容旧浏览器？伪元素清除仍最稳妥：
.clearfix::after { content: ""; display: table; clear: both; } - 移动端 Safari 对
z-index+float兼容性差，transform: translateZ(0)可备选强制层叠上下文
真正容易被忽略的是：重叠从来不是“文字跑偏了”，而是父容器失去对子项高度的感知能力；clear 解决的是“起点错位”，而 display: flow-root 或 flex 才是从根上恢复这种感知。
