高度塌陷因浮动元素脱离文档流导致父元素无法包裹子元素；解决方法包括：1. 使用clearfix伪类清除浮动并兼容IE；2. 设置overflow:hidden触发BFC闭合浮动，但可能裁剪溢出内容；3. 添加clear:both的空元素，结构与样式分离差，不推荐；4. 采用Flex或Grid布局替代浮动，现代项目首选。维护旧项目可用clearfix，新项目推荐Flex/Gr id以提升可维护性。
当使用CSS的float属性进行布局时，父元素无法正确包裹浮动子元素，导致高度塌陷，这是前端开发中常见的问题。解决这个问题的核心是清除浮动，让父容器能正确计算并包含其浮动子元素的高度。
为什么会出现高度塌陷？
浮动元素会脱离正常的文档流，父元素在计算高度时“看不到”这些浮动子元素，因此其高度可能为0或仅包含非浮动内容，造成布局错乱。
常见的清除浮动方法
以下是几种实用且兼容性良好的清除浮动方案：
1. 使用伪类 :after 清除浮动（推荐）
立即学习“前端免费学习笔记（深入）”；
通过给父元素添加一个清除浮动的伪元素，既不影响结构，又能有效闭合浮动。
CSS代码示例：
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
zoom: 1; /* 兼容IE6/7 */
}
将 clearfix 类应用到包含浮动子元素的父容器上即可。
2. 使用 overflow 属性闭合浮动
设置父元素的 overflow 为 hidden 或 auto，可触发BFC（块级格式化上下文），从而包含浮动元素。
CSS 示例：
.container {
overflow: hidden; /* 或 auto */
}
注意：如果子元素有超出容器的内容（如下拉菜单），可能会被裁剪，需谨慎使用。
3. 添加额外的清除元素（传统方式）
在浮动元素末尾添加一个空元素，并设置 clear: both。
HTML 示例：
<div class="float-left">左浮动</div> <div class="float-left">右浮动</div> <div style="clear:both;"></div>
这种方式破坏了结构与样式的分离，不推荐现代开发中使用。
4. 使用 Flex 或 Grid 布局替代浮动
现代布局更推荐使用 Flexbox 或 CSS Grid，从根本上避免浮动带来的问题。
例如使用 Flex：
.container {
display: flex;
}
.float-item {
/* 不再需要 float */
}
布局更简洁，无需清除浮动。
如何选择合适的清除方式？
如果是维护老项目，继续使用 clearfix 是最稳妥的选择。新项目建议采用 Flex 或 Grid 布局，提升可维护性和响应式能力。避免使用额外标签和容易引发副作用的 overflow 方法。
基本上就这些，关键是理解浮动原理，根据实际场景灵活应对。清除浮动虽小，但对页面结构影响大，不可忽视。
