浮动导致父容器高度塌陷是因元素脱离文档流，解决需清除浮动而非硬撑；推荐伪元素::after触发BFC，flex布局下无需清浮动，IE8-用*zoom:1兼容。
浮动元素撑不开父容器怎么办
父元素高度塌陷是浮动最典型的副作用，本质是浮动元素脱离文档流，父容器计算高度时直接忽略它们。这不是 bug，是 CSS 规范明确规定的渲染行为。
- 确认是否真需要浮动：现代布局中，
float多数场景可被display: flex或display: grid替代，更可控且无塌陷问题 - 若必须用浮动（如兼容老 IE 或图文环绕），清除浮动是必要步骤，不能靠加高父容器“硬撑”
-
overflow: hidden虽能触发 BFC 清除塌陷，但会意外裁剪溢出内容（比如下拉菜单、阴影、绝对定位子元素）
.parent {
/* ❌ 不推荐：可能隐藏重要视觉内容 */
overflow: hidden;
<p>/<em> ✅ 更稳妥：仅清除浮动，不影响溢出 </em>/
&::after {
content: "";
display: table;
clear: both;
}
}</p>clear: both 为什么有时不生效
clear: both 只对紧邻的后续块级元素起作用，不是“给父容器打补丁”。常见失效场景：
清除节点写在浮动元素内部（比如浮动
div里放div style="clear:both"），它只影响自身位置，不反馈给父容器-
清除节点是行内元素（如
span），clear对其无效，必须是块级或设置display: block立即学习“前端免费学习笔记（深入）”；
浮动元素本身设置了
margin-bottom，而清除节点没占满整行，导致视觉上仍有错位清除节点应放在所有浮动子元素之后，且为块级元素
推荐统一用伪元素
::after，避免污染 HTML 结构如果清除节点是 JS 动态插入的，确保它在 DOM 中位于浮动元素末尾，且未被
display: none或visibility: hidden隐藏
flex 布局下还用清浮动吗
不用。只要父容器设了 display: flex，子元素即使写了 float: left，浮动声明也会被忽略（CSS 规范规定：浮动在 flex 容器中无效）。此时不存在塌陷，也无需清除。
- 检查开发者工具的 computed 样式，确认父容器实际渲染的
display值是不是flex - 注意嵌套场景：外层 flex，内层某个子容器又用了
float—— 这时问题转移到那个子容器身上，和外层无关 - 若发现 flex 下仍有错位，大概率是 margin 折叠、align-items 默认值或 min-width 导致的，不是浮动问题
IE8 及以下必须用什么清除方式
zoom: 1 触发 hasLayout 是唯一稳定方案，配合 ::after 伪元素在现代浏览器中已不够用。
- 单独写
zoom: 1在 IE8- 中能撑开父容器，但会导致字体缩放异常（尤其配合font-size百分比时） - 必须搭配
*zoom: 1（IE7- hack）或条件注释，否则 IE7 下仍塌陷 - 避免在
input、button等替换元素上使用zoom，可能引发聚焦样式错乱
.clearfix {
*zoom: 1; /* IE7 */
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
浮动清除看着简单，但真实项目里最容易栽在「以为清了，其实没清到位置」——比如清除节点被 position: absolute 移走，或者父容器有 transform 导致新层叠上下文，让 ::after 失效。动手前先看 computed 样式里的 float 和 clear 实际值，比猜快得多。
