浮动元素脱离文档流导致文字环绕，clear仅使自身避开前面浮动元素而非清除浮动，flow-root可安全包裹浮动子元素，现代布局优先选flex/grid。
浮动元素后面的文字为什么会堆叠在旁边
因为浮动元素脱离了文档流，后续的块级元素不会自动避开它，文字作为行内内容会环绕浮动框，看起来像“堆叠”在右侧或左侧。这不是bug，是CSS浮动的原始设计逻辑——用来实现图文混排。
-
float: left会让元素左移，文字从右边开始流式填充剩余空间 - 如果后续是
<p></p>这类块级元素，默认宽度100%，但它的顶部可能和浮动元素对齐，导致视觉上“压住”浮动块下方区域 - 真正出问题的不是浮动本身，而是没控制好后续元素的布局起点
clear属性怎么用才不踩坑
clear 的作用不是“清除浮动”，而是“让当前元素的上边界避开前面的浮动元素”。它只影响自身，不修复父容器塌陷。
- 常用值：
clear: left、clear: right、clear: both—— 根据前面浮动的方向选，不是无脑写both - 别加在浮动元素自己身上：给
float: left的元素再设clear: left没意义，它前面没浮动兄弟 - 加在需要“换行”的那个元素上，比如浮动菜单后的主内容
<main></main>，设clear: both才能真正下移 - 注意继承性：
clear不继承，子元素不会自动避开父级的浮动兄弟
为什么有时候clear不生效
常见原因是元素本身没触发块格式化上下文（BFC），或者被其他定位/浮动干扰了渲染顺序。
- 父容器高度塌陷时，
clear可能“找不到”该避开的浮动——因为浮动已经溢出父容器，不在当前块级上下文中了 - 绝对定位（
position: absolute）或固定定位元素无视clear，它只对常规流中的块级盒生效 - Flex 或 Grid 容器里的子项也不响应
clear，它只在块级布局中起作用 - 检查 computed style：浏览器开发者工具里看
clear是否被更高优先级规则覆盖（比如某个!important或更具体的选择器）
现代替代方案要不要直接上
如果只是为了解决“浮动后清空”，clear 依然有效且轻量；但若整个布局依赖浮动做多栏，就该考虑替换。
立即学习“前端免费学习笔记（深入）”；
-
display: flow-root是最接近“安全清浮动”的新方案：给父容器设它，既能包裹浮动子元素，又不影响内部流式布局 - Flex/Grid 更适合结构化布局，但它们和浮动不兼容——一旦父容器设
display: flex，子元素的float就失效 - 别为了“新”而改：老项目里一个
clear: both能解决的问题，硬套flow-root可能引发未知的盒模型偏移
浮动本身没被废弃，但它的语义和可控性越来越弱。真正容易被忽略的是：很多所谓“清除浮动”的需求，其实源于没提前规划好文档流层级——比如把导航栏做成浮动，却忘了主内容需要明确的定位锚点。
