使用clear属性或clearfix方案可解决浮动导致的父容器高度塌陷问题，推荐现代布局flexbox或grid以避免此类问题。
在多行布局中，浮动元素常导致父容器高度塌陷，影响后续内容排版。使用CSS清除浮动能有效解决这类问题，确保布局稳定。
理解浮动带来的影响
当子元素设置了 float: left 或 float: right，它们会脱离正常文档流，父容器无法自动包裹它们，造成高度为0。这在多行排列的卡片、图文列表等场景中尤为明显。
使用clear属性清除浮动
在浮动元素末尾添加一个空元素，并设置 clear: both，可强制该元素位于所有浮动元素下方。
示例：
<div class="container">
<div class="item" style="float: left;">项目1</div>
<div class="item" style="float: left;">项目2</div>
<div style="clear: both;"></div>
</div>
推荐使用clearfix方案（现代做法）
避免添加无意义的HTML标签，通过伪元素在CSS中完成清除。
立即学习“前端免费学习笔记（深入）”；
CSS代码：
.clearfix::after {
content: "";
display: table;
clear: both;
}
将 class="clearfix" 添加到包含浮动元素的父容器上即可。
使用现代布局替代浮动（更优选择）
对于多行布局，建议优先考虑 flexbox 或 grid，它们天生不受浮动影响，代码更简洁。
Flex示例：
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 0 0 50%; /* 每行两列 */
}
基本上就这些。清除浮动是传统方法，掌握它有助于维护旧项目。新项目建议直接用flex或grid，从根本上避免问题。
