浮动导致父容器高度塌陷，解决方法有：1. 使用clearfix通过伪元素清除浮动，兼容性好；2. 设置overflow:hidden触发BFC，但可能裁剪溢出内容；推荐优先使用flex或grid布局替代。
浮动元素脱离了正常的文档流，导致父容器无法感知其高度，从而出现父容器高度塌陷、撑不开的问题。这是CSS布局中常见的问题，尤其在使用浮动进行多列布局时容易发生。解决方法主要有两种：使用 clearfix 或设置 overflow 属性。
1. 使用 clearfix 清除浮动
通过给父容器添加一个专门清除浮动的类，利用伪元素在内容末尾插入一个隐藏的块级元素，并清除其两侧的浮动，从而让父容器包含浮动子元素。
.clearfix::after {
content: "";
display: block;
clear: both;
}
<p>.clearfix {
zoom: 1; /<em> 兼容IE6/7 </em>/
}</p>然后将该 class 应用于需要被撑开的父容器：
<div class="clearfix"> <div style="float:left;">左侧浮动</div> <div style="float:right;">右侧浮动</div> </div>
2. 设置父容器 overflow 属性
给父容器设置 overflow: hidden 或 overflow: auto 可以触发BFC（块级格式化上下文），使父元素能够包含内部的浮动元素。
.container {
overflow: hidden; /* 或 overflow: auto */
}
这种方法简单直接，但需要注意：overflow: hidden 会裁剪超出容器的内容，如果子元素有下拉菜单、提示框等溢出需求，可能会影响显示。
3. 推荐做法与注意事项
- 现代开发中更推荐使用 flex 或 grid 布局替代浮动，从根本上避免此类问题。
- 如果必须使用浮动，clearfix 是最通用且安全的方案，兼容性好，不影响溢出内容。
- 避免滥用 overflow: hidden，特别是在可能有定位元素溢出的场景。
基本上就这些。选择合适的方法取决于具体布局需求和浏览器兼容要求。clearfix 更精准，overflow 更简洁，按需使用即可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
