清浮动的本质是防止父容器高度塌陷，正确做法是让非浮动块级元素位于浮动元素之后并设置clear: both；现代推荐用display: flow-root或clearfix伪元素方案。
为什么在浮动元素后面加 clear: both 能“清浮动”
浮动元素会脱离文档流，导致父容器高度塌陷——这不是 bug，是 CSS 规范里明确定义的行为。加一个空 <div style="clear: both"></div>，本质是插入一个「不浮动、且强制换行」的块级元素，它会避开上方所有浮动，从而把父容器的底部边界“撑”下来。
这个操作有效，但代价是 HTML 里多了一个无语义、纯为样式服务的节点，维护性差，可读性低。
clear: both 的实际写法和常见错误
很多人直接写 clear: both 却没意识到：它只对「块级元素」生效，且必须出现在浮动元素的「后续兄弟元素」中（不能是浮动元素自己，也不能是父元素）。下面这些写法都无效：
-
.float-box { clear: both; }—— 浮动元素自己设clear，不影响父容器高度 -
.parent { clear: both; }—— 父元素没浮动，clear完全不起作用 -
<span style="clear: both"></span>——<span></span>默认是 inline 元素，clear不生效
正确做法是确保它是块级、紧跟在浮动元素之后：
立即学习“前端免费学习笔记（深入）”；
<div class="wrapper"> <div class="float-left">左浮</div> <div class="float-right">右浮</div> <div style="clear: both"></div> </div>
现代替代方案：用 ::after 伪元素代替空 div
不用改 HTML，纯靠 CSS 就能模拟那个“清浮动的空 div”，关键是利用 ::after 生成一个块级内容，并设置 clear: both。
最简可靠写法：
.clearfix::after {
content: "";
display: block;
clear: both;
}
注意三个要点：
-
content: ""必须有，否则伪元素不渲染 -
display: block必不可少，inline 或 inline-block 都无法触发clear - 要给父容器加这个类，比如
<div class="wrapper clearfix"> <p>兼容性没问题：IE8+ 都支持 <code>::after和clear组合。更省事的方案：
overflow: hidden或display: flow-root如果只是想让父容器包含浮动子元素，不一定要“清除”——可以改变父容器的 BFC（块级格式化上下文）触发条件：
-
overflow: hidden（或auto、scroll）：简单粗暴，但可能意外裁剪溢出内容或触发滚动条 -
display: flow-root：专为此设计的值，创建新 BFC 且无副作用，Chrome 58+/Firefox 53+/Safari 15.4+ 支持
推荐优先用
display: flow-root，语义清晰、行为可控；老项目需兼容 IE 时，才退回到clearfix类。真正容易被忽略的是：清浮动不是目的，防止父容器塌陷才是。选哪种方式，得看你的布局是否允许改变父容器的
overflow或display，而不是机械套用“空 div + clear”。 -
