float导致父容器高度塌陷是因为浮动元素脱离文档流，父容器无法感知其高度；需通过clearfix类（含*zoom:1、display:table和clear:both）或空元素清除法解决，但后者存在语义污染等问题。
为什么 float 会导致父容器高度塌陷
当子元素使用 float: left 或 float: right 时，它们会脱离文档流，父容器无法感知浮动子元素的高度，于是高度变成 0 —— 这在 IE6/7 中尤为明显，连现代浏览器也会出现同样问题。
这不是 bug，是 float 的设计行为。关键在于：你得主动“清除浮动”来让父容器重新包裹内容。
用 clearfix 类解决兼容性问题（推荐）
IE6/7 不支持 ::after 伪元素的某些触发方式，所以经典 clearfix 需要额外处理。下面这个版本能同时覆盖 IE6+ 和现代浏览器：
.clearfix {
*zoom: 1; /* 触发 IE6/7 hasLayout */
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}注意点：
立即学习“前端免费学习笔记（深入）”；
生成HTML格式PPT
下载
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
-
*zoom: 1是 IE6/7 专属 hack，仅它们识别，不影响其他浏览器 -
display: table在 IE6/7 中比display: block更可靠，避免伪元素不渲染 - 不要只写
:after，IE6/7 对单伪元素支持不稳定，:before是保险动作
空元素清除法（简单但不推荐长期用）
在浮动元素末尾加一个空标签并设 clear: both，例如：
<div class="wrap"> <div style="float:left">左</div> <div style="float:right">右</div> <div style="clear:both"></div> </div>
这种写法的问题很实际：
- HTML 结构污染：语义无关的 DOM 节点，不利于维护和可访问性
- IE6 下若空
<div> 没设置 <code>height或font-size，可能被忽略（尤其在line-height: 0环境中） - 每次都要手写，容易遗漏，也不利于组件化复用
- 目标元素本身也设置了
float——clear对浮动元素无效，它只作用于**标准流中的块级元素** - 父容器有
overflow: hidden但没触发 hasLayout（IE6/7），此时需补zoom: 1 -
clear元素前面没有真正浮动的兄弟元素（比如浮动元素被display: none了） - CSS 选择器权重不够，被其他规则覆盖（IE6 的样式优先级计算略有差异）
IE6/7 下 clear 不生效的常见原因
即使写了 clear: both，也可能没反应，典型情况包括：
复杂布局里，clearfix 是更可控的选择；但如果你正调试一段老 IE 代码，先检查 clear 元素是否真的处于标准流、前面是否有有效浮动节点，比反复改类名更省时间。
