浮动元素撑不开父容器是因为其脱离文档流，父容器无法计算高度；解决方法是触发BFC（如display: flow-root）或使用clearfix清除技术。
浮动元素为什么会撑不开父容器
当子元素设置了 float: left 或 float: right，它会脱离普通文档流，父容器无法感知其高度，导致父容器高度塌陷——看起来像“没包住”子元素。这不是 bug，是 CSS 浮动的原始设计行为。
常见现象：div 里放了几个 float: left 的 img 或 aside，但父 div 在开发者工具里显示高度为 0，后续兄弟元素直接往上“贴”。
- 只用
clear: both本身不解决父容器塌陷，它只是让某个元素避开左右浮动，不参与浮动布局 - 想让父容器“包裹住”浮动子元素，得触发 **BFC（块级格式化上下文）** 或使用清除技术
- 现代项目优先考虑
display: flow-root，它是最干净的 BFC 触发方式，且无副作用
clear both 的正确使用位置和限制
clear: both 必须作用在浮动元素**之后**的、仍处于文档流中的元素上，才能把它“推到浮动区域下方”。它不是加在浮动元素自己身上，也不是加在父容器上（那样无效）。
.clearfix::after {
content: "";
display: table;
clear: both;
}这段经典 clearfix 代码的本质，就是在父容器末尾注入一个伪元素，并让它 clear: both，从而把父容器的底部“拉下来”。注意：
立即学习“前端免费学习笔记（深入）”；
-
clear: both对position: absolute或display: flex子元素完全无效 - 如果后续元素本身也浮动了，
clear就不起作用——它只对文档流中的块级元素生效 - 在 Flex 或 Grid 容器内部，
float和clear基本被忽略，不要混用
比 clear both 更可靠的现代替代方案
除非要兼容 IE8 及更早版本，否则没必要写 clearfix 或手动插 div style="clear:both"。这些做法容易遗漏、难维护，且语义不清。
-
display: flow-root：直接加在父容器上，强制创建 BFC，自动包含浮动子元素，无额外 DOM、无伪元素、支持所有现代浏览器（Chrome 58+、Firefox 53+、Safari 10.1+） -
overflow: hidden或overflow: auto：也能触发 BFC，但可能意外裁剪阴影、溢出动画或出现滚动条，风险高于flow-root - Flex/Grid 布局：把父容器设为
display: flex或display: grid，浮动子元素会自动变成 inline-level 行为，失去浮动效果——此时应改用align-self或justify-content控制位置
实际调试时怎么快速定位浮动影响
遇到布局错乱，别急着加 clear。先打开浏览器开发者工具，逐层检查：
- 看父容器 computed 样式里
height是否为0或远小于预期 → 很可能是浮动塌陷 - 选中可疑子元素，看
Computed > float是否为left/right，同时position是static→ 确认是传统浮动流问题 - 检查父容器是否已有
display: flex或display: grid→ 此时浮动已失效，问题根源可能是其他样式（如margin-collapse或vertical-align）
浮动不是过时技术，但在响应式布局中极易引发连锁错位。真正难处理的，往往是多个浮动嵌套 + 混合 inline-block + 未重置 white-space 的老项目——这时候，flow-root 一行就能切掉大半问题。
