clear:both 对 span 或 display 被覆盖的 div 无效，因其仅作用于块级盒，而最终 display 值非 block、flex、grid 等则不触发清除；br 标签无盒模型，clear 对其天然无效；clear 加在浮动元素自身无意义；父容器塌陷需靠 bfc 而非 clear。
clear:both 为什么对 span 或 div（但 display 被覆盖）无效
因为 clear 只对块级盒（block-level box）生效，而是否为块级，取决于最终计算出的 display 值，不是看标签名或初始默认值。
常见错误现象：给一个 <span class="clear-fix"></span> 加了 clear: both，页面毫无反应；或者用 JS 动态插入的 <div> 看似没效果——其实它被某个 CSS 规则设成了 <code>display: inline 或 display: flex。
实操建议：
- 用开发者工具选中该元素，在 Computed 面板里直接查
display的最终值，确认是不是block、table、flow-root、flex、grid等能生成块级盒的值 - 检查是否有更高优先级规则覆盖了
display，比如某个父选择器写了.parent span { display: inline; } - 避免用
span承担清除职责；若必须用行内标签，至少显式加display: block -
clear对display: inline、display: inline-block（非块级上下文）、display: contents元素完全忽略
为什么 br 标签加 clear="both" 或 style="clear:both" 没用
br 是 HTML 换行符，不生成任何盒（box），也不参与 BFC 或浮动上下文——clear 是 CSS 盒模型属性，对它天然无效。这种写法在 HTML5 中已被废弃，现代浏览器直接忽略。
实操建议：
- 删掉所有类似
<br clear="both">或<br style="clear:both">的代码，它们从不工作 - 需要换行+清除，改用真正的块级元素，例如：
<div style="clear:both; height: 0; font-size: 0;"></div> - 更推荐用伪元素方案，避免 DOM 膨胀
clear:both 加在浮动元素自己身上，为什么白写
clear 的作用对象是「自身上边框避开前序浮动」，而浮动元素（float: left 等）已脱离标准文档流，clear 对它没有清除意义——它本来就不受其他浮动影响，也不会撑开父容器。
实操建议：
- 绝对不要这样写：
.float-item { float: left; clear: both; } - 正确位置是浮动元素的**下一个兄弟块级元素**，且该元素不能浮动、不能绝对定位、不能是
display: inline - 如果浮动容器内只有浮动子项，后面没兄弟元素，那
clear就根本无处安放——这时应转用 BFC 方案
为什么加了 clear:both 还是塌陷？关键在父容器没形成 BFC
很多人以为 clear: both 能解决父容器高度塌陷，其实不能。clear 只让某个元素下移，不改变父容器的盒模型计算逻辑。塌陷根源是父容器未形成 BFC，无法包含浮动子项。
实操建议：
- 优先用
display: flow-root给父容器设 BFC，语义清晰、无裁剪副作用、兼容性足够（Chrome 64+/Firefox 59+/Edge 79+） - 避免用
overflow: hidden，它可能意外裁剪position: absolute子元素或阴影 - 如果必须用伪元素清除，确保
::after有content: ""、display: table（或block）、clear: both三者齐全
真正容易被忽略的点是：clear 生效与否，永远取决于「目标元素是否在文档流中 + 是否为块级 + 是否紧邻浮动之后」，三者缺一不可。靠猜结构或堆样式不如打开 Computed 面板看一眼 display 和 position。
