父容器无法撑起浮动子元素高度时，可通过clearfix类或overflow:auto解决。使用.clearfix::after{content:"";display:table;clear:both}可清除浮动，HTML中为父容器添加clearfix类即可完整包裹子元素；或设置父容器overflow:auto触发BFC，使其包含浮动内容，但需注意hidden可能裁剪溢出。项目中浮动较多时推荐clearfix，个别情况用overflow:auto更便捷。现代布局建议采用Flexbox或Grid替代浮动，避免此类问题。
当使用 CSS 的 float 属性对子元素进行浮动时，父容器常常会出现无法被子元素撑起高度的问题，导致布局错乱。这是因为浮动元素脱离了正常的文档流，父元素“看不到”它们的存在。解决这个问题有两个常用且有效的方法：使用 clearfix 类或设置 overflow: auto。
使用 Clearfix 清除浮动
通过添加一个专门清除浮动的类（clearfix），可以强制容器包含其浮动子元素。
常见的 clearfix 写法如下：.clearfix::after {
content: "";
display: table;
clear: both;
}
在 HTML 中将该类应用到浮动容器上：
<div class="clearfix"> <div style="float: left;">左侧内容</div> <div style="float: right;">右侧内容</div> </div>
这样父容器就能正确包裹住所有浮动子元素，高度自然撑开。
立即学习“前端免费学习笔记（深入）”；
设置 overflow: auto 或 hidden
给父容器设置 overflow: auto 或 overflow: hidden 可以触发 BFC（块级格式化上下文），使容器包含内部浮动元素。
示例 CSS：.container {
overflow: auto; /* 或 hidden */
}
这种方法简单直接，但需注意 overflow: hidden 会裁剪超出部分，若子元素有下拉菜单或提示框可能被遮挡。推荐优先使用 overflow: auto，兼容性好且副作用较小。
选择合适方案的建议
- 如果项目中浮动较多，建议统一使用 clearfix 类，结构清晰且不影响溢出表现。
- 若只是个别容器需要处理，用 overflow: auto 更快捷。
- 现代布局推荐使用 Flexbox 或 Grid 替代浮动，从根本上避免此类问题。
基本上就这些，根据实际场景选一种方式即可解决浮动容器高度塌陷问题。不复杂但容易忽略。
