清除浮动的核心是让父容器正确包裹浮动子元素以避免高度塌陷，最常用方式是clearfix技巧（通过伪元素触发BFC并clear:both），现代推荐用flex或grid布局替代浮动。

清除浮动的核心是让父容器能正确包裹内部浮动元素，避免高度塌陷。最常用且可靠的方式是使用 clearfix 技巧，它通过伪元素触发 BFC（块级格式化上下文）并清除浮动影响。

为什么需要清除浮动

当子元素设置 float: left 或 float: right 后，会脱离文档流，导致父容器无法感知其高度，出现“高度塌陷”——父容器高度变为 0，背景、边框、下边元素会上移，布局错乱。

clearfix 的经典实现（推荐）

这是目前最通用、兼容性好（支持 IE8+）、语义清晰的写法：

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1; /* IE6/7 触发 hasLayout */
}

• ::before 和 ::after 创建两个匿名表格单元格，使父容器形成 BFC，包容浮动子元素
• ::after 的 clear: both 确保它出现在所有浮动元素下方，撑开父容器底部
• *zoom: 1 是 IE6/7 的 hack，触发 hasLayout，实现类似 BFC 的效果

现代更简洁的替代方案（Flex / Grid）

如果不需要兼容老浏览器，可直接用现代布局方式替代浮动：

• 给父容器设 display: flex，子项自动排列且父容器正常包裹
• 用 display: grid 配合 grid-template-columns 实现多列布局，无需浮动
• 二者天然不脱离文档流，不存在塌陷问题，也无需 clearfix

其他清除方法对比

• 空 div 法： —— 简单但污染 HTML 结构，不推荐
• overflow:hidden —— 触发 BFC，但可能隐藏溢出内容（如阴影、下拉菜单），有副作用
• display:flow-root（CSS3）—— 新标准属性，专为创建无副作用的 BFC 设计，Chrome 64+/Firefox 62+ 支持，可作为 clearfix 的轻量替代