浮动元素脱离文档流导致父容器高度塌陷，因父容器无法感知浮动子元素高度；清除浮动需在浮动元素后、父容器内添加clear: both的块级元素，或用.container::after{content:"";display:table;clear:both}伪元素法。
为什么 float 会让父容器高度塌陷？
浮动元素会脱离文档流，父容器无法感知其高度，导致后续元素上移、错位——这不是“最后一个元素有问题”，而是整个父容器失去了包裹能力。常见现象是：底部 div 跑到浮动元素右侧、背景色没撑开、边框消失。
用 clear: both 清除浮动的实操要点
在浮动元素之后、父容器闭合前插入一个“清道夫”元素，强制中断浮动影响：
<div class="container"> <div class="box" style="float: left;">左</div> <div class="box" style="float: right;">右</div> <div style="clear: both;"></div> </div>
-
clear: both只对块级元素生效，span或inline元素加了也无效 - 必须放在所有浮动子元素之后，且仍在父容器内
- 这个清除元素本身会占据空间（哪怕内容为空），可能带来意外的 margin/padding 问题
更现代的替代方案：::after 伪元素清除法
避免额外 DOM 节点，直接用 CSS 注入清除行为，兼容性好（IE8+）：
.container::after {
content: "";
display: table;
clear: both;
}
-
display: table是关键，它让伪元素成为块级格式化上下文（BFC），能包裹浮动子项 - 不能用
display: block，否则clear在某些旧浏览器中失效 - 如果父容器本身有
zoom: 1（IE hack），可同时触发 BFC，但已不推荐
什么时候该放弃清除浮动？
当布局只需要左右并排、且父容器无需背景/边框/高度控制时，float 本就不该是首选。现代项目中：
立即学习“前端免费学习笔记（深入）”；
- 两栏/三栏布局优先用
display: flex，flex容器天然包含子项，无塌陷问题 - 响应式网格用
display: grid，语义清晰、控制粒度细 - 仍需支持 IE9 及以下才考虑
float + clear组合
清除浮动只是补救手段，真正要盯住的是：父容器是否需要参与后续布局流——如果需要，就别用 float 做主布局。
