浮动元素导致父容器高度塌陷因其脱离普通文档流父容器无法感知其高度推荐用伪元素 clearfix 方案清除浮动现代布局应优先选用 Flex 或 Grid。为什么浮动元素会让父容器高度塌陷因为浮动元素脱离了普通文档流父容器在计算高度时直接“看不见”它。这不是 bug是 CSS 规范里明确写的行为——float 的本意就是让文字绕排不是用来布局的。常见错误现象div 里放了几个 float: left 的子元素父容器在开发者工具里显示高度为 0背景色、边框全没了用 getBoundingClientRect() 拿到的 height 也是 0。只对**触发 BFC 的条件之一**起作用比如 overflow: hidden但会意外裁剪 position: absolute 子元素或阴影clear: both 必须加在浮动元素**之后**的兄弟元素上加在父容器上无效Flex 或 Grid 布局下根本不需要清除浮动——它们天然不依赖文档流高度计算最稳妥的清除方式伪元素 clear这是目前兼容性最好、副作用最小的方案所有现代浏览器和 IE8 都支持。核心逻辑在父容器末尾插入一个看不见的块级元素并让它强制清掉左右浮动。立即学习“前端免费学习笔记深入” 唱鸭 音乐创作全流程的AI自动作曲工具集 AI 辅助作词、AI 自动作曲、编曲、混音于一体