clear: both的空div必须是父容器内浮动元素后的直接块级子节点，否则无效；常见失效原因包括位置错误、父容器为flex/grid、display:none或高度被锁定。
为什么加 <div style="clear: both"></div> 有时没用
不是标签写错了，而是它没在正确的位置、没以正确的方式参与布局。这个空 <div> 必须是块级、可见、且处于浮动子元素之后的**直接子节点**，否则浏览器根本不会把它当作“清除点”。
<p>常见失效原因：</p>
<ul><li>空 <code><div> 被写在父容器外部（比如紧贴父容器闭合标签之后），它就清不了父容器内的浮动
<li>父容器设了 <code>display: flex 或 display: grid，此时子元素的 float 已被忽略，clear 属性完全无效
<div> 被设了 <code>display: none、height: 0 且没配 overflow: hidden，它不占文档流空间，清除行为不触发
height 或 min-height，高度被锁死，再怎么清除也撑不开
clear: both 的作用位置必须精准到父容器末尾
clear: both 不是给父容器加的样式，而是加在一个**新块级元素上**，让它“拒绝和前面任何浮动元素同行”，从而把父容器的底部边界往下拉。所以它必须插在所有浮动子元素之后、且仍是父容器的子元素。
正确写法示例：
.container {
border: 1px solid red;
}
.container .float-item {
float: left;
width: 200px;
height: 100px;
background: #eee;
}
对应 HTML：
<div class="container"> <div class="float-item"></div> <div class="float-item"></div> <div style="clear: both"></div> </div>
注意：<div style="clear: both"> 是 <code><div class="container"> 的最后一个子节点，不是兄弟节点。
<h3>比起空标签，更该关心它带来的结构污染和维护成本</h3>
<p>每次加一个空 <code><div>，HTML 就多一层无语义的 DOM 节点。它不表达内容、不参与交互、只为了“骗”浏览器算高——这对可访问性、SEO、后续 JS 查询都埋了隐患。
<p>替代方案对比：</p>
<ul>
<li>
<code>overflow: hidden：一行 CSS 解决，但可能意外裁剪 box-shadow、下拉菜单或 position: absolute 子项
.clearfix::after：不增 DOM，靠伪元素完成同样逻辑，推荐写法是 content: "" + display: table + clear: both
display: flow-root：现代标准解法，专为包含浮动设计，零副作用，Chrome 58+/Firefox 57+/Safari 15.4+ 全支持空标签清除法现在只适合哪几种情况
它没被淘汰，但适用范围极窄：
- 老项目中无法修改 CSS，只能动 HTML（比如 CMS 模板、第三方组件嵌入）
- 需要兼容 IE6–7 且不能用
zoom: 1或伪元素（极少数遗留系统） - 临时调试时快速验证是否真是浮动塌陷问题（比改 CSS 更快看到效果）
真正难处理的，从来不是“加不加空标签”，而是加完之后，父容器是否还按预期参与文档流、是否影响兄弟元素间距、是否和 transform 或 clip-path 冲突——这些不会报错，但会在改版时突然浮现。
