父容器高度塌陷应使用伪元素清理：在直接父容器上添加.clearfix类，其::after伪元素设content:""、display:table、clear:both；现代布局优先采用flex或grid。
浮动元素导致父容器高度塌陷怎么办
这是最典型的“空白”表现：父容器看起来像被掏空了，背景色、边框都只显示在浮动元素上方，下方一片空白。根本原因是浮动元素脱离文档流，父容器无法感知其高度。
解决思路不是给父容器加高度，而是让父容器“重新包含”浮动子元素。常用方法有两种：clear 和伪元素清理，但它们适用场景不同。
-
clear本身不作用于父容器，而是让某个兄弟元素“避开浮动”，所以它不能直接修复塌陷——除非你在父容器末尾加一个带clear: both的空<div>，但这属于冗余 DOM <li>更推荐用伪元素（<code>::after）在父容器内部生成一个清除浮动的节点，既无额外标签，又语义干净 - 现代项目中，优先考虑改用
display: flex或display: grid布局，浮动本就不是为整体布局设计的
用伪元素清理浮动的标准写法是什么
核心是给浮动元素的父容器添加一个带 clear: both 的 ::after 伪元素，并确保它参与文档流（即设置 content 和 display: table 或 block）。
最稳妥的写法：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意点：
-
content必须存在（哪怕为空字符串），否则伪元素不会渲染 -
display: table比block更安全，能避免某些浏览器下外边距合并问题 - 不要漏掉
display: block或table，否则clear不生效 - 这个类要加在浮动子元素的**直接父容器**上，不是祖先容器
为什么有时加了 clear: both 还有空白
常见于把 clear 错误地加在浮动元素自身上，或者加在错误的兄弟元素位置。
例如：
- 给浮动的
<div class="float-left"> 自己加 <code>clear: both—— 这会让它避开所有前面的浮动，但不影响父容器高度，空白照旧 - 在浮动元素之后、父容器之外放一个
<div style="clear: both"> —— 它确实清除了浮动，但只是把自己往下推，父容器依然塌陷 <li>父容器设置了 <code>overflow: hidden却没意识到它也有“BFC 触发”效果，误以为是clear起作用
判断是否真解决问题，看父容器的 getBoundingClientRect().height 是否包含了浮动子元素的实际高度，而不是只凭视觉“好像没空白”。
兼容性与现代替代方案要注意什么
::after 清理在 IE8+ 都支持，但 IE6–7 需要 zoom: 1 触发 hasLayout，所以老项目可能看到：
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
不过现在基本不用管 IE6–7。真正该留意的是：
- 如果父容器本身是
flex或grid容器，浮动会失效，clear也无效——此时浮动和清除机制被完全绕过 - 使用
float做多栏布局时，一旦内容高度不一致，靠clear只能保证“不重叠”，无法对齐底部，这时空白其实是设计缺陷，不是清除能解决的 - 伪元素清理虽好，但如果整个页面大量使用，说明还在用浮动做主布局，技术债在积累
浮动适合图文环绕、小图标对齐这类局部场景；一整块区域的布局逻辑，别硬扛 clear，该切就切。
