浮动元素“消失”是因父容器未形成bfc导致高度塌陷，属css规范行为；修复关键在于触发bfc，推荐display: flow-root（无副作用），兼容场景可选overflow: hidden或zoom: 1。
浮动元素为什么“消失”了？
因为父容器没形成BFC，导致浮动脱离文档流后，父容器高度塌陷。这不是bug，是CSS规范定义的行为。
- 常见错误现象：
div包着几个float: left的子元素，但父容器在开发者工具里显示高度为0px - 典型场景：用浮动做多栏布局（比如左导航+右内容），结果页面下方内容直接上移覆盖
- 别急着加
clear: both，它只解决后续元素的错位，不修复父容器塌陷本身 - 真正要做的，是让父容器触发BFC——只要满足任一BFC条件即可
BFC触发条件怎么选最稳妥？
不是所有BFC触发方式都适合布局修复，得看兼容性和副作用。
-
overflow: hidden最常用，但会裁剪溢出内容（比如下拉菜单、阴影、绝对定位偏移） -
display: flow-root是现代首选，专为此设计，无副作用，Chrome 64+/Firefox 58+ 支持 -
float: left或position: absolute虽然也触发BFC，但会改变自身定位行为，不推荐用于修复父容器 - IE8+ 需兼容时，
zoom: 1（触发hasLayout）仍有效，但仅限IE
浮动和BFC在响应式中容易被忽略的冲突点
当媒体查询改变布局方向（比如从横排变竖排），BFC状态可能意外失效。
- 例如：小屏下把
float: left改成display: block，但忘了同步移除或调整父容器的overflow: hidden - 又如：用
display: flex替换浮动后，父容器BFC自动消失，若内部仍有绝对定位元素，可能因包含块变化而偏移 - 关键判断点：只要父容器不再包裹浮动元素，就该评估是否还需维持BFC；反之，新增浮动就得检查父容器是否仍处于BFC
overflow: hidden 就以为万事大吉，却没注意滚动条被吃掉、阴影被截断、或者在flex/Grid时代还硬套老方案——这些才是实际项目里最常卡住人的地方。 
