clear:both 仅对同一父容器内的紧邻块级兄弟元素生效，若元素非兄弟关系、脱离文档流或非块级盒则无效；解决高度塌陷应优先用display:flow-root或clearfix伪元素。
clear:both 为什么对相邻元素无效
因为 clear:both 不是“清除浮动”，而是让**当前元素的上边框避开前一个浮动元素的外边缘**。它只作用于自身，且必须满足两个硬性前提：该元素得是块级盒，还得是浮动元素在文档流中的**紧邻后续兄弟元素**。如果相邻元素不是兄弟关系（比如嵌套在不同父容器里），或者中间被 position: absolute、display: flex 等打断了文档流，clear:both 就完全找不到参照物。
检查 DOM 嵌套是否破坏了“紧邻兄弟”关系
常见错误是把 clear:both 加在和浮动元素不同父级的元素上。例如浮动盒子在 .sidebar 里，而你却给 .main 的第一个子元素加 clear:both——这两个元素根本不是兄弟，只是同级容器的子项，clear 对它们之间的关系无感知。
- 用开发者工具选中那个加了
clear:both的元素，右键 → “Reveal in Elements panel”，确认它是否真在浮动元素的**直接后方、同一父容器内** - 检查浮动元素和
clear元素之间有没有空文本节点、注释、<!-- -->或display: contents容器——这些都会让“紧邻”失效 - 如果结构类似
<div class="wrap"><div class="float"></div></div> <div class="clear"></div>，那.clear和浮动不在同一父级，clear必然不生效
层级错位：position、flex、grid 切断清除链路
只要浮动元素或 clear 元素任一方脱离了标准文档流，或者被包裹在非块级格式化上下文（BFC）容器中，clear 就会失效。典型干扰源包括：
-
position: absolute或position: fixed的父容器没设height或overflow，导致高度坍缩，浮动子项虽在视觉上存在，但已不在文档流中供clear参考 - 浮动元素的父容器用了
display: flex或display: grid—— 这两种布局下float属性本身就被忽略（Firefox 除外），clear更无从谈起 -
clear元素自己被设为display: inline、display: inline-flex或display: contents，它就不再是块级盒，clear被浏览器直接忽略
真正要解决的不是“清除”，而是“让父容器包含浮动”
多数人写 clear:both 其实想解决的是父容器高度塌陷。但 clear 本身做不到这点——它只推下一个元素，不撑开父级。这个认知偏差导致大量无效调试。
- 优先用
display: flow-root给浮动容器设样式，这是现代标准解法，无裁剪、无副作用，兼容 Chrome 64+ / Firefox 59+ / Edge 79+ - 若需兼容旧版，用
.clearfix::after伪元素方案，但务必确保：content不为空、display是block或table、clear: both没被覆盖 - 别在媒体查询里单独改
clear规则——响应式失效往往是因为浮动元素在小屏下已换行或脱离流，此时清除目标已不存在；应同步重置布局模式（如切到flex）或重设父容器 BFC
最常被忽略的一点：清除浮动的本质矛盾在于，你试图用一个流内规则去干预一个已脱离流的元素。与其反复调 clear，不如先确认浮动是否还该存在——很多场景下，float 本就不该是首选方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
