浮动元素不会撑开父容器高度，是因为其脱离文档流后父容器布局计算时完全忽略其存在，这是css 2.1规范定义的行为；常见表现包括背景色/边框消失、后续元素上浮、clear: both加在父容器上无效。
因为浮动元素脱离文档流，父容器在布局计算时根本“看不见”它们的高度——这不是 bug，是 CSS 2.1 规范定义的行为。
float 元素为什么不会撑开父容器高度
一旦子元素设置 float: left 或 float: right，它就从普通文档流中被完全移除。父容器的 height: auto 只基于仍在流内的内容（比如文字、未浮动块）计算，浮动子项的高度直接被忽略。
常见表现包括：
- 父容器背景色/边框只显示一条细线
- 后续兄弟元素上浮到浮动区域里，布局错乱
-
padding-bottom在视觉上“失效”，内容贴着父容器底边
clear: both 写在父容器上完全没用
clear: both 的作用对象是**同级块级元素**，语义是“这个元素要避开前面所有浮动”，而不是“让父容器包含浮动子项”。写在父容器上，CSS 解析器会忽略该声明——语法合法，但无任何布局效果。
真正起作用的位置必须满足：
- 是父容器的**直系子元素**（且排在所有浮动子项之后）
- 该元素为块级：
display: block或display: table - 不能被
display: none或visibility: hidden隐藏
overflow: hidden 能撑高，但不是“清浮动”
overflow: hidden 是通过触发 BFC（块级格式化上下文），让父容器重建边界，从而重新包含浮动子项的高度。但它本质是“重建容器”，不是“清除浮动”。
副作用需提前评估：
- 所有超出父容器范围的
position: absolute子元素（如下拉菜单、tooltip）会被裁剪 - 若父容器原本设了
overflow: auto，加hidden会直接禁掉滚动 - IE6/7 需额外加
zoom: 1或height: 1%才能触发 hasLayout
现代项目该用什么替代 float 做自适应高度
直接换布局模型比硬清浮动更可靠：
-
display: flex：父容器设display: flex; flex-direction: row;，子项自动参与高度计算，align-items: stretch还能等高 -
display: grid：天然规避塌陷，grid-template-columns+align-items: start更适合卡片类响应式布局 -
display: flow-root：最小改动替代overflow: hidden，无裁剪副作用，但 iOS Safari ≤15.3 不支持
最容易被忽略的一点：很多开发者花几小时调试“父容器为啥没高度”，却没意识到这是 float 的规范行为——它本来就不该参与文档流。重构前先确认是否真需要兼容已淘汰的 IE 或极老 WebView。如果不需要，别清浮动，直接换 Flex 或 Grid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
