浮动元素导致父容器高度塌陷是因为其脱离普通文档流，父容器无法感知其存在；解决方法是触发bfc，如用display: flow-root（推荐）或overflow: hidden，而非依赖clear: both或空div。
为什么浮动元素会导致父容器高度塌陷
因为浮动元素脱离了普通文档流，父容器在计算高度时会“看不见”它们，只按非浮动子元素撑开。常见现象是：父容器 background-color 只显示一条细线，或边框包不住内部浮动的 div。
clear: both 本身不解决父容器高度问题
clear: both 只是让某个元素避开浮动，它不能让父容器重新包含浮动子项。很多人在浮动元素后面加一个空 div 并设 clear: both，这确实能“撑开”视觉位置，但属于补救措施，不是让父容器真正获得高度。
- 这个空
div必须放在浮动子元素之后，且不能被隐藏（如display: none） - 它只是把自身下推到浮动结束处，父容器依然不知道浮动子项的存在
- 语义差，HTML 中多出无意义节点
推荐用 overflow: hidden 或 display: flow-root 清除浮动并撑高父容器
这两个方案都能触发父容器的 BFC（块级格式化上下文），使它重新包含浮动子元素，从而自然撑开高度。
-
overflow: hidden兼容性好（IE6+），但要注意：如果子元素有position: absolute且超出父容器，会被裁剪 -
display: flow-root是现代标准解法（Chrome 64+/Firefox 59+/Safari 15.4+），专为创建 BFC 设计，无裁剪副作用，语义清晰 - 两者都不需要额外 HTML 节点，纯 CSS 解决
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flow-root; /* 推荐优先用这个 */
/* 或者：overflow: hidden; */
}
.container .float-item {
float: left;
width: 200px;
}flex 或 grid 布局天然规避浮动高度塌陷
如果你本就在用弹性布局或网格布局，就根本不需要浮动。一旦父容器设为 display: flex 或 display: grid，子项自动参与高度计算，浮动（float）属性对其完全失效——这不是 bug，是规范行为。
- 浮动和 flex/grid 不兼容，强行写
float会被忽略 - 想实现类似浮动的排列效果，改用
flex-wrap、justify-content或grid-template-columns - 这种方案最干净，但需确认浏览器支持度是否满足项目要求
真正容易被忽略的是：很多老项目沿用浮动布局，却没意识到父容器塌陷本质是文档流脱离导致的，而不是“没清浮动”这么简单——关键在是否建立了新的格式化上下文。
