浮动列表最后一行元素塌陷或错位是因浮动脱离文档流导致父容器高度塌陷；clearfix通过伪元素插入清除浮动的块级内容来修复，必须作用于直接父容器；现代推荐用flex布局替代浮动。
浮动列表最后一行元素塌陷或错位的典型表现
当 li 元素设为 float: left 构建水平列表，且容器高度未显式设定时，常出现最后一行元素“掉下来”、父容器高度塌陷、后续内容顶上来——这不是浏览器 bug，而是浮动脱离文档流后的必然行为。
常见错误现象包括：
- 列表末尾几个
li挤到下一行，但位置明显右偏或不对齐 - 父
ul或div高度为 0，背景色/边框不显示 - 紧接其后的段落或模块直接覆盖在列表下方
为什么 clearfix 能解决这个问题
clearfix 的核心是利用伪元素（::after）在父容器末尾插入一个「清除浮动」的块级内容，强制父容器重新计算高度并包裹所有浮动子元素。
关键点在于：
立即学习“前端免费学习笔记（深入）”；
- 必须作用于浮动元素的**直接父容器**（比如
ul或外层div），而非li自身 - 旧版 IE（6/7）需额外声明
zoom: 1触发 hasLayout - 现代写法可省略
content: ""的引号，但保留更稳妥
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 */
}
clear: both 放在哪儿才真正起效
很多人误以为给最后一个 li 加 clear: both 就能修复，实际会导致整行被“挤下来”，破坏水平布局。
正确做法只有两种：
- 给父容器加
clearfix类（推荐，语义清晰、复用性强） - 在父容器末尾手动插入一个空
div并设style="clear: both"（不推荐，污染 HTML 结构）
注意：clear: both 对浮动元素自身无效，它只对**后续的块级兄弟元素**生效——这也是为什么必须插在父容器内部末尾。
Flexbox 替代方案是否值得切换
如果项目不需要支持 IE9 及以下，用 display: flex 是更干净的解法：
ul {
display: flex;
flex-wrap: wrap;
}
li {
float: none; /* 移除浮动 */
}优势明显：
- 无需
clearfix，无高度塌陷问题 - 天然支持等高、对齐、间距控制（
gap） - 响应式换行逻辑更可控（
flex-wrap）
但要注意：若列表项高度差异大，flex 默认按行对齐（align-content: stretch），可能产生视觉空隙，此时需调整 align-content 或改用 inline-block + vertical-align。
浮动错位本质是文档流管理问题，clearfix 是向后兼容的补救手段；而现代布局中，主动放弃浮动、改用 flex 或 grid 才是根治方式——只是别忘了检查你的最低兼容要求。
