clear: both必须加在浮动元素之后的下一个兄弟块级元素上，因其只作用于该元素自身外边距以避开前面浮动，对浮动元素自身、父容器或非块级元素均无效。
直接加 clear: both 在文字容器上，通常就能立刻止住重叠——但前提是它得是浮动元素的下一个兄弟块级元素。
clear 该加在谁身上？不是浮动元素自己
很多人试了 clear: both 没反应，是因为加错了位置：clear 对浮动元素自身完全无效（它已经浮起来了），必须加在紧随其后、需要避开它的那个块级元素上。
- 一张
float: left的图片后面跟一个<p></p>，就给这个<p></p>加clear: both - 侧边栏
float: left，主内容区是<main></main>，那就给<main></main>加clear: left（比both更精准） - 父容器上加
clear没用——它不是浮动元素的兄弟，而是祖先，浏览器根本不处理
为什么只调 margin-bottom 或 margin-right 常常失效
margin 看似简单，实则靠猜：它不解决文档流塌陷，只是“假装”留了空。一旦页面缩放、字体加载延迟、或 CMS 动态插入内容，数值立刻失准。
- 响应式断点切换时，固定
margin-right: 15px可能突然变成 0 或溢出 - 多个浮动并排（比如两列缩略图），
margin容易相互叠加或抵消，调试时难以定位来源 - 对浮动元素设
margin-bottom能缓解首行文字“钻底”现象，但无法阻止后续段落整体上浮
现代打印预览中 clear 失效怎么办
Chrome/Edge 打印引擎不处理 float 和 clear 的流式语义，只认文档流内的块级位置。你看到的“重叠”，其实是内容被错误堆在同一物理页区域。
-
clear: both在打印中常被忽略，尤其当目标元素是display: inline或父容器也浮动时 -
overflow: hidden在打印中会裁剪box-shadow、transform溢出、position: absolute子项 - 真正有效的做法是在
@media print中显式重置：* { float: none !important; }，再用display: flex或display: table重构关键区域
真正容易被忽略的是：浮动重叠从来不是“文字跑偏了”，而是父容器高度为 0 后，整段文字的行框失准——clear 解决的是“起点错位”，而 display: flow-root 或 overflow: auto 才是从根上恢复容器对子项的感知能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
