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，必须出现在“所有浮动元素之后、且仍处于文档流中”的一个块级元素上，这样才能把父容器底部“拉下来”。
立即学习“前端免费学习笔记（深入）”；
