浮动元素撑不开父容器是因为其脱离文档流导致父容器高度塌陷；正确解法是触发BFC（如display: flow-root），而非依赖clear属性。
浮动元素为什么会撑不开父容器
当子元素设置了 float: left 或 float: right，它会脱离文档流，父容器就“看不见”它了，高度塌陷成 0。后续的非浮动元素会向上移动，叠在浮动元素上，看起来像“被影响”——本质是父容器没包裹住浮动子项。
clear 属性只能解决兄弟元素重叠，不能修复父容器塌陷
clear 作用对象是**自身**，不是父容器。给后续元素加 clear: both，只是让它避开前面的浮动块，往下排，但父容器依然高度为 0，背景、边框、内边距都失效。
- ✅ 正确用法：
+.next { clear: both; }→ 避开前面浮动 - ❌ 误以为能修父容器：
.parent { clear: both; }→ 无效，clear对无浮动的父元素不起作用
推荐用 BFC 方式清除浮动（现代可靠解法）
触发父容器的 BFC（块级格式化上下文），就能自动包含内部浮动元素，高度恢复正常。比老式 clearfix 更简洁、无 hack 成分。
-
overflow: hidden（最常用，注意内容溢出会被裁剪） -
display: flow-root（推荐！专为此设计，无副作用，Chrome 58+/Firefox 57+ 支持） -
float: left或position: absolute也行，但会改变父容器定位行为，慎用
示例：
.container {
display: flow-root;
}
.container > .item {
float: left;
} —— 父容器立刻撑开，后续元素自然下移，无需额外标签或伪元素。
legacy 场景下仍需 clearfix 时的关键细节
如果必须兼容 IE8 或使用旧框架，:after 伪元素 clearfix 仍是首选，但要注意三点：
立即学习“前端免费学习笔记（深入）”；
- 必须设置
content: ""，否则伪元素不生成 - 必须设
display: table或block，table更稳妥（避免 margin 折叠） - 父容器需有
zoom: 1（IE6/7 触发 hasLayout）
标准写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 */
}
BFC 方案虽好，但 display: flow-root 在部分老旧项目构建工具中可能被 CSS 压缩器误删，上线前务必检查生成后的样式是否保留。
