CSS中如何让浮动元素撑开父容器_深度解析清除浮动

浮动元素导致父容器高度塌陷，因其脱离普通文档流，父容器无法感知其高度；推荐用伪元素 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 自动作曲、编曲、混音于一体