clear: both的空div必须是父容器内浮动元素后的直接块级子节点，否则无效；常见失效原因包括位置错误、父容器为flex/grid、display:none或高度被锁定。
为什么加 <div style="clear: both"></div> 有时没用
不是标签写错了，而是它没在正确的位置、没以正确的方式参与布局。这个空 <div> 必须是块级、可见、且处于浮动子元素之后的**直接子节点**，否则浏览器根本不会把它当作“清除点”。
常见失效原因：
- 空
<div>被写在父容器外部（比如紧贴父容器闭合标签之后），它就清不了父容器内的浮动 - 父容器设了
display: flex或display: grid，此时子元素的float已被忽略，clear属性完全无效 - 空
<div>被设了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"> 是 <div class="container"> 的最后一个子节点，不是兄弟节点。
比起空标签，更该关心它带来的结构污染和维护成本
每次加一个空 <div>，HTML 就多一层无语义的 DOM 节点。它不表达内容、不参与交互、只为了“骗”浏览器算高——这对可访问性、SEO、后续 JS 查询都埋了隐患。
替代方案对比：
-
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 冲突——这些不会报错，但会在改版时突然浮现。
