浮动导致父容器高度塌陷不是bug，是css规范行为：浮动元素脱离文档流，父容器计算高度时忽略它们，仅基于文档流内内容；典型表现包括背景色不显示、边框缩成线、后续元素重叠。
浮动元素脱离文档流，父容器“看不见”它们
这不是 bug，是 CSS 规范定义的行为：float: left 或 float: right 会让元素完全脱离普通文档流。父容器在计算自身高度时，只基于仍在流内的内容（比如文本、非浮动块），而对浮动子元素视而不见——哪怕它们视觉上还在那儿，offsetHeight、DevTools 显示的高度、背景色渲染，全都会归零或严重缩水。
常见现象和误判点
你看到的往往是这些表现：
- 父容器背景色不显示、边框缩成一条线
- 后续兄弟元素直接“贴”到浮动块下方，而不是被撑开后正常换行
- 用 JavaScript 读取
parent.offsetHeight返回0或远小于预期值 - 误以为是 Bootstrap 的问题——其实纯 CSS 浮动也会塌陷，框架只是暴露了它
为什么 clear: both 加在父元素上没用
clear: both 的作用对象是它所在的元素本身，不是它的父容器。写在父元素上：div { clear: both; } —— 父元素自己没浮动，这条声明毫无意义；写在浮动子元素上：.float-left { clear: both; } —— 只会让那个子元素换行，不会让父容器重新感知所有浮动子项的高度。
真正起效的，是让父容器创建一个能“包含”浮动子项的上下文，比如 BFC（块级格式化上下文），或者插入一个参与文档流、且带 clear: both 的占位元素。
别把 float 塌陷和 absolute 塌陷搞混
position: absolute 也会导致父容器高度塌陷，但原因和解法完全不同：clearfix、overflow: hidden、display: flow-root 全部无效。因为 absolute 元素既不浮动，也不参与任何 BFC 的高度计算——它压根不在流里。修复必须按语义判断：装饰性元素（如角标）不该撑高父容器；功能性内容（如弹出菜单主体）应改用 flex 或 grid 布局，或用 JS 动态计算位置。
最容易被忽略的是：你花时间修的，可能根本不是该修的问题——如果布局里大量依赖 float 实现整体结构，那核心矛盾往往不是“怎么清浮动”，而是“是否该换 layout 方式”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
