float让父容器高度为0是因为其脱离文档流，父容器计算高度时忽略浮动子元素；正确清除需在浮动后添加处于文档流中的块级元素，或使用display:flow-root创建BFC。
为什么 float 会让父容器高度变成 0？
因为 float 的本质是让元素“脱离普通文档流”——父容器在计算自身高度时，只看还在文档流里的子元素；一旦子元素加了 float: left 或 float: right，它就从这个“高度计算名单”里被划掉了。
这不是 bug，是设计如此：浮动最初只为实现“文字环绕图片”，本就不该参与父容器的布局尺寸计算。
- 父容器没设
height时，高度由内部非浮动内容撑开；全浮动 → 撑开力量为 0 → 高度塌陷 - 塌陷后常见现象：
background-color不显示、border缩成线、后续元素上移覆盖浮动块 - 注意：浮动元素仍在页面上有物理位置（影响行内元素排版），只是对父容器“隐身”了
clear: both 为什么加在子元素上没用？
很多人把 clear: both 写在浮动子元素自己身上，比如：.child { float: left; clear: both; } —— 这只会让它避开前面的浮动，对父容器高度毫无帮助。
真正起作用的 clear，必须出现在“所有浮动元素之后、且仍处于文档流中”的一个块级元素上，这样才能把父容器底部“拉下来”。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<div class="child" style="float:left; clear:both"></div>→ 清除的是它自己的浮动上下文，不是父容器的 - 正确逻辑：需要一个“看得见、有存在感、但又不占视觉空间”的元素，比如伪元素
::after -
clear本身不创建高度，它只是告诉浏览器“这一行不能再有浮动了”，而要让这行产生高度，得靠display: block或display: table
display: flow-root 是什么？比 overflow:hidden 更干净吗？
是的。display: flow-root 是现代 CSS 中专门为此类问题设计的属性：它显式创建一个新的块级格式化上下文（BFC），让父容器重新包含所有子元素（包括浮动），且不附带副作用。
对比 overflow: hidden：flow-root 不会裁剪 position: absolute 偏移出界的弹窗、不会意外触发滚动条、不影响 box-shadow 渲染。
- 推荐写法：
.container { display: flow-root; } - 兼容性：Chrome 58+、Firefox 53+、Safari 15.4+、Edge 79+；若需支持 IE 或老 Safari，回退到
clearfix方案 - 注意：
flow-root不会影响子元素的 flex/grid 布局行为，可安全与其他现代布局共存
现在还该用 float 做布局吗？
绝大多数情况下，不该。
浮动不是为网格/导航/卡片布局设计的；它用来做文字环绕或兼容极老系统。用 float 实现三栏布局，不如一行 display: flex；用它做响应式导航，不如 justify-content: space-between + flex-wrap。
- Flex/Grid 天然不脱离文档流，父容器高度自动适应，不存在塌陷问题
- 一旦用了
display: flex或display: grid，clear、clearfix、flow-root全部失效且无意义 - 真要用浮动（比如图文混排），记得只在局部用，别让它“接管”整个容器的布局责任
