父元素高度塌陷是因浮动元素脱离文档流，解决方法是触发BFC（如overflow:hidden）或清除浮动（如::after+clear:both），现代布局推荐直接使用flex/grid。
父元素高度塌陷是因为float脱离了文档流
当子元素用了 float: left 或 float: right，它就不再参与父容器的高度计算，父元素高度会坍缩为 0（尤其在没有其他非浮动内容时）。这不是 bug，是 float 的设计行为——它本就为文字环绕图片这类场景服务的。
解决思路不是“让父元素强行撑高”，而是让父容器重新建立包含浮动子元素的 BFC（块级格式化上下文），从而自然包裹住浮动元素。
用 overflow: hidden 触发BFC最直接
给父容器加 overflow: hidden（或 overflow: auto）是最常用、兼容性好（IE6+）、副作用小的方法。它强制创建 BFC，使父容器能正确计算浮动子元素的高度。
- ✅ 适用于大多数布局场景，比如导航栏、图文混排容器
- ⚠️ 注意：如果父容器内部真有需要溢出显示的内容（比如下拉菜单、tooltip），
overflow: hidden会裁剪掉，这时得换方案 - ❌ 不要写
overflow: visible——它不触发 BFC，无效
.container {
overflow: hidden; /* 关键 */
}
.container .float-item {
float: left;
width: 200px;
}
clear: both 清除浮动必须加在父容器内部末尾
用 clear: both 是另一种思路，但必须确保清除元素在浮动子元素之后、且仍在父容器内。常见错误是把 写到父容器外面，或者忘了加。
- ✅ 可靠、语义清晰，无溢出裁剪风险
- ❌ 需要额外 DOM 节点（哪怕用伪元素也能避免，见下条）
- ? 推荐用伪元素替代空标签：
::after+content: ""+clear: both，更干净
.container::after {
content: "";
display: table;
clear: both;
}
注意：display: table 比 display: block 更稳妥，能兼容 IE8+；如果只支持现代浏览器，display: block 也行。
现代方案：flex 或 grid 直接绕过 float
如果你不需要兼容老版本 IE（如 IE9 以下），根本不用 float。用 display: flex 或 display: grid 布局，子项默认不会脱离文档流，父容器天然撑开高度。
- ✅ 无塌陷问题、代码更简洁、响应式更自然
- ⚠️
float在 Flex/Grid 容器里会失效（被忽略），所以不能混用 - ? 替代 float 左右排列：flex 用
justify-content，grid 用grid-template-columns
例如替换浮动导航栏：
.nav-container {
display: flex;
}
.nav-item {
flex: 1; /* 或设 width */
}
float 塌陷的本质是文档流参与度缺失，而现代布局模型从设计上就规避了这个问题。如果项目允许，优先用 flex/grid；若必须维护旧代码，overflow: hidden 和伪元素清除法最值得信赖——但得记清它们各自生效的前提和边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
