父容器高度为0px是float的正常设计行为而非bug；因浮动元素脱离文档流，父容器计算height: auto时直接忽略它们，display: flow-root是首选修复方案，可创建bfc且无裁剪副作用。
父容器高度为 0px 是正常行为，不是 bug
只要子元素用了 float: left 或 float: right，它就彻底脱离普通文档流。父容器在计算 height: auto 时，直接忽略这些浮动项——哪怕子元素写了 height: 200px，父容器的 computed height 仍可能是 0px。你在 DevTools 里看到 border 断开、背景色消失、后续元素上浮，全是因为父容器渲染区域真的“塌”没了。
这不是代码写错了，是 float 的原始设计目的：让文字绕排，不是用来做布局的。所以别想着“修复 float”，重点是让父容器重新感知子项尺寸。
display: flow-root 是首选，但得确认浏览器支持
它专为解决这类问题而生，强制父容器创建新的 BFC，自然包含所有浮动子项，且无副作用：
- 不裁剪
position: absolute弹层、box-shadow、transform移出边界的元素 - 不引入额外 DOM 节点或伪元素，语义干净
- 兼容 Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+
-
注意：
display: flow-root和position: absolute不能共存于同一元素，后者会让前者失效
用法很简单：
.parent { display: flow-root; }
clearfix 伪元素必须三个条件全满足才生效
如果要兼容 IE11 或对接无法改 HTML 的第三方系统，::after 清除仍是刚需。但漏掉任意一条，它就完全没用：
-
content: ""必须存在（空字符串也不可省） -
display必须是table或block（inline不占位，无效） -
clear: both必须加在伪元素上，且父容器类名要准确作用于**直接包裹浮动子项的那个元素**
典型写法：
.clearfix::after { content: ""; display: table; clear: both; }
HTML 中：
<div class="clearfix"><div style="float:left"></div></div>
overflow: hidden 能撑高，但裁剪风险常被低估
它靠触发 BFC 实现撑高，写法最短，但副作用真实存在：
- 所有超出父容器边界的
position: absolute元素（下拉菜单、tooltip、弹窗）会被静默裁剪 - 若父容器本身是
display: inline或inline-block，overflow属性根本不会生效 -
overflow: auto更保守，但滚动条可能穿帮；overflow: visible（默认值）则完全不触发 BFC - 某些 Safari 版本会无故渲染空白滚动条
真正卡住的问题，往往不是清除没写对，而是没确认子元素是否真的在浮动——打开 DevTools，查 computed 样式里的 float 值是不是 none。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
