空div能清除浮动是因为其clear: both强制停在所有前面浮动元素下方，从而撑开父容器；必须置于浮动元素之后、不可隐藏、推荐加height: 0; overflow: hidden;。
直接用 clear: both 就行，但必须确保空 <div> 在浮动元素之后、且不被父容器塌陷吞掉。
<h3>为什么空 div 能<a style="color:#f60; text-decoration:underline;" title="清除浮动" href="https://m.php.cn/zt/72877.html" target="_blank">清除浮动</a>？</h3>
<p>浮动元素会脱离文档流，导致父容器高度坍缩；插入一个带 <code>clear: both 的空 <div>，它会强制“停在所有前面浮动元素的下方”，从而撑开父容器。
<p>关键不是“空 div”本身，而是它的 <code>clear 行为 —— 浏览器（包括 CSS2 兼容模式）对 clear 的解析是确定且一致的。
- 必须放在所有浮动子元素的 后面（HTML 顺序靠后）
- 不能设
display: none或visibility: hidden，否则不参与布局，无法触发清除 - 推荐加
height: 0; overflow: hidden;避免意外占位
常见的 HTML 和 CSS 写法
最稳妥的写法是：
<div class="container"> <div style="float: left;">左栏</div> <div style="float: right;">右栏</div> <div style="clear: both; height: 0; overflow: hidden;"></div> </div>
也可以抽成类名复用：
.clearfix { clear: both; height: 0; overflow: hidden; }
注意：overflow: hidden 不是为了清除，而是防止某些 IE6/7 下因 hasLayout 缺失导致的边距合并或内容溢出问题 —— 这在 CSS2 环境里仍是实际要考虑的兼容点。
容易踩的坑
这些操作会让清除失效，尤其在老浏览器中：
- 空
<div> 写在浮动元素 <em>之前</em> —— 它还没碰到浮动块，<code>clear不触发 - 给空
<div> 加了 <code>float: left—— 浮动元素之间无法相互clear - 父容器设了
height或min-height固定值 —— 塌陷虽被掩盖，但清除逻辑其实没生效，响应式时易出问题 - 用
<br clear="both">替代 —— 虽然 HTML4 里合法，但部分 CSS2 渲染引擎对clear属性在非块级元素上的支持不稳定
真正麻烦的不是写法，而是当多个浮动层嵌套、又混用 position: relative 时，clear 只作用于同一块格式化上下文（BFC）内的浮动 —— 这时候空 div 就清不干净了，得换思路。
