清除浮动的核心是让父容器正确包裹浮动子元素以避免高度塌陷，最常用方式是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 的轻量替代
