使用伪类after清除浮动，通过添加clearfix类实现父容器高度自适应；2. 设置父容器overflow:hidden或auto触发BFC包含浮动；3. 采用display:flow-root创建BFC，现代浏览器推荐方案；4. 避免使用额外clear元素。建议优先选择::after或flow-root方法。
当子元素设置了浮动（float）后，父容器往往无法正确包裹它们，导致高度塌陷。解决这个问题需要清除浮动，让父容器能正确计算高度。以下是几种常用且有效的方法。
使用伪类 after 清除浮动
这是最推荐的做法，通过在父容器上添加一个伪元素来清除内部浮动。
CSS 示例：.clearfix::after {
content: "";
display: block;
clear: both;
}
HTML 使用：
<div class="clearfix">
<div style="float: left;">左浮动</div>
<div style="float: right;">右浮动</div>
</div>
给父容器加上 clearfix 类，即可自动撑起高度。
为父容器设置 overflow 属性
通过触发 BFC（块级格式化上下文），使父元素包含浮动元素。
立即学习“前端免费学习笔记（深入）”；
.parent {overflow: hidden; /* 或 auto */
}
这种方法简单，但要注意 overflow: hidden 可能会裁剪内容，比如弹出的下拉菜单或阴影效果。
使用 display: flow-root
现代浏览器支持的新方法，能创建新的块级格式化上下文，自动包含子元素，包括浮动元素。
.parent {display: flow-root;
}
无需额外标签或伪元素，语义清晰，是目前最干净的解决方案，适合现代项目。
在末尾添加清除浮动的元素（不推荐）
在浮动元素最后添加一个带 clear 属性的空标签。
<div style="clear: both;"></div>虽然有效，但破坏了结构与样式的分离原则，增加无意义的 DOM 节点，应避免使用。
基本上就这些方法。日常开发中建议使用 ::after 伪元素 或 display: flow-root，既有效又符合现代标准。
