父容器高度变成0是因为浮动元素脱离文档流，导致父容器无法计算高度；推荐用clearfix配合::after伪元素清除浮动，或用overflow:hidden触发bfc，但现代布局应优先使用flex/grid。
为什么父容器高度会变成 0？
因为 float 让元素彻底脱离标准文档流，父容器“看不见”它了——既不参与高度计算，也不影响后续兄弟元素的定位。结果就是：边框缩成一条线、背景色消失、下面的 div 直接叠上来。这不是 bug，是 float 的设计行为。
用 ::after 伪元素清除浮动（推荐）
这是目前最干净、兼容性好、无 HTML 污染的方案。核心是让父容器自己“生成一个清道夫”，在末尾插入一个不可见但能撑高的块级元素，并清除两侧浮动。
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容 IE6–7，触发 hasLayout */
}-
display: table比block更稳妥：避免某些浏览器中外边距合并问题，且天然触发 BFC 边界 - 别漏掉
content: ""—— 没内容，伪元素不会渲染 - IE6–7 必须加
*zoom: 1，否则伪元素不生效 - 给父容器加
class="clearfix"即可，子元素照常float: left
用 overflow: hidden 触发 BFC（快捷但要小心）
只需一行 CSS：overflow: hidden 或 overflow: auto 就能开启 BFC，让父容器“重新感知”浮动子元素的高度。
.parent {
overflow: hidden; /* 或 auto */
border: 1px solid #333;
}- 优点是写得少、见效快，IE7+ 全支持
- 致命副作用：所有溢出内容（比如
position: absolute的下拉菜单、box-shadow、tooltip）会被裁剪 - 如果父容器本身需要滚动或动画位移，
overflow: hidden可能意外截断交互区域 - 不要用
overflow: scroll，它会强制显示滚动条，干扰视觉
现代布局该不该还用 float？
答案很直接：**除文字环绕图片等极少数场景外，不该用了。**
立即学习“前端免费学习笔记（深入）”；
-
display: flex或display: grid天然不塌陷，父容器自动包裹子项高度，代码更直观 - 浮动布局一旦嵌套多层、响应式断点变化，
clear和宽度控制极易失控 - 很多新手误以为“float 能实现两栏布局”，其实
flex一行justify-content: space-between就搞定，还不用操心清除 - 如果你正在维护老项目，优先补
.clearfix；新项目直接换 flex/grid —— 不是“升级”，是回归合理语义
真正容易被忽略的点是：清除浮动不是目的，让父容器正确参与文档流才是。 很多人加了 clear: both 却忘了检查父容器是否仍有 margin-collapse 或 min-height 冲突，结果高度“看似恢复”，但和兄弟元素间距错乱。调试时打开浏览器开发者工具，盯着 computed height 和 layout tab 看，比背方案管用得多。
