浮动元素脱离文档流致父容器高度塌陷为0，因父容器无法感知其尺寸；现代推荐解法是display:flow-root触发BFC，或用clearfix伪元素清除，慎用overflow:hidden以防裁剪溢出内容。
float父容器不是“闭合”，而是整体漂浮
它根本没闭合浮动，只是让父容器自己也脱离文档流，和子元素一起被当作一个浮动单元参与排版。浏览器此时不再要求父容器“包裹”子元素，而是按浮动上下文重新计算尺寸——子元素的宽高自然被纳入父容器的浮动布局范围，视觉上就“撑开了”。
为什么容易出错：float父容器会破坏兄弟元素流
一旦父容器设了 float: left 或 float: right，它就从标准流里消失了。紧随其后的兄弟块级元素（比如 、）会立刻填补它原来的位置，导致布局上移、错位甚至重叠。
- 必须手动给后续元素加
clear: both才能强制换行，否则布局链全乱 - 如果父容器上方有非浮动标题，标题可能被“顶上去”，盖住浮动区域
- 嵌套浮动时风险放大：你可能被迫把祖父容器也设为
float，最终整页都飘起来
display: flow-root 才是真正安全的替代方案
display: flow-root 是专为解决这个问题设计的现代属性，它触发BFC但不改变元素在文档流中的位置，也不影响溢出行为。而 overflow: hidden 虽然也能触发BFC，但可能意外裁剪 position: absolute 子元素或 JS 弹出菜单。
-
display: flow-root在 Chrome 58+/Firefox 57+ 支持良好，但 IE 完全不支持 - 若需兼容 IE，应退回
::after伪元素清除法，而不是用float父容器“凑合” - 别忘了检查项目是否已启用 flex/grid：若父容器已是
display: flex，子元素的float实际上被忽略，根本不存在塌陷问题
什么情况下真能临时用 float 父容器
仅限调试或极简隔离模块，且满足三个条件：无兄弟元素依赖、无响应式变化、不涉及后续维护。例如：
- 一个独立的横向图标导航栏，CSS 里写死
width和float，且确定永远不和其他标准流内容交互 - 老 CMS 输出的区块，HTML 结构无法修改，又不能插伪元素，才用
float父容器“顶一下” - 快速验证是否是浮动导致塌陷：加个
float: left看父容器高度是否恢复——这只是诊断动作，不是上线方案
真正要交付的代码里，float 父容器几乎总是比原始问题更难收场。它不是解法，是信号：说明布局结构该重构了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
