使用 clearfix 或 clear:both 可解决浮动导致的父容器高度塌陷。1. 在浮动元素后添加 clear: both 的空元素，强制布局闭合；2. 推荐使用 clearfix 伪类方案，通过 .clearfix::after {content: ""; display: table; clear: both;} 无需额外 dom 节点；3. 现代开发建议采用 overflow: hidden 触发 bfc 或直接使用 flex/grid 布局，避免浮动问题，提升结构清晰度与维护性。
浮动元素脱离文档流后，父容器容易出现高度塌陷，导致布局跳动或错位。解决这个问题的关键是正确清除浮动，让父元素能包含住内部的浮动子元素。常用的方案有 clearfix 和 clear:both，下面分别说明如何使用它们恢复稳定布局。
使用 clear:both 清除浮动
在浮动元素的末尾添加一个不浮动的块级元素，并设置 clear: both，可以强制该元素出现在所有浮动元素下方，从而撑起父容器。
示例代码：<div class="container"> <div class="float-left">左浮动</div> <div class="float-right">右浮动</div> <div style="clear: both;"></div> </div>
这种方法简单直接，但需要额外的 HTML 元素，不够语义化。
使用 clearfix 技巧（推荐）
通过 CSS 伪类自动在容器末尾插入隐藏的清除元素，无需修改 HTML 结构，更优雅地解决浮动问题。
立即学习“前端免费学习笔记（深入）”；
标准 clearfix 写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
将 clearfix 类应用到包含浮动元素的父容器上即可：
<div class="container clearfix"> <div class="float-left">左浮动</div> <div class="float-right">右浮动</div> </div>
这个方法兼容性好，不会增加无意义的 DOM 节点，是现代开发中的常用做法。
现代替代方案：使用 overflow 或 flex
如果不需要支持过时浏览器，也可以考虑更现代的布局方式来避免浮动带来的问题。
- 给父容器设置 overflow: hidden 或 overflow: auto 可触发 BFC，包含浮动元素
- 改用 flexbox 布局，从根本上摆脱对浮动的依赖
例如：
.container {
display: flex;
}
.float-left { flex: 1; }
.float-right { flex: 1; }
基本上就这些。对于老项目中的浮动布局，用 clearfix 最稳妥；新项目建议优先使用 Flex 或 Grid 布局，更简洁可控。
