直接给 li 加 clear: both 不够用，因为它只能阻止后续元素上浮，无法让 li 包裹内部浮动子元素，导致高度塌陷；需用 display: flow-root 或伪元素 clearfix 触发 BFC 来真正包含浮动。
为什么直接给 li 加 clear: both 不够用
因为浮动元素脱离文档流，仅靠 clear: both 只能阻止后续块级元素“上浮”到浮动旁，但无法让 li 自身包裹住内部浮动的图文——它的高度会塌陷，导致下个 li 的内容从它腰部穿过去。
常见错误现象：li 看起来没高度、背景色没铺开、边框只显示顶部一条线、后续 li 文字叠在前一个图上。
-
clear: both是“防撞”，不是“撑高” - 必须让
li建立 BFC 或触发清除上下文，才能包含浮动子元素 - 现代写法优先用
display: flow-root，兼容性差时再退回到伪元素 clearfix
display: flow-root 是最干净的解法
它让 li 成为一个格式化上下文容器（BFC），自动包含内部浮动，且不改变布局流，比 overflow: hidden 更安全（不会意外裁剪阴影或定位元素）。
使用场景：现代项目、支持 Chrome 64+/Firefox 57+/Safari 11.1+ 的环境。
立即学习“前端免费学习笔记（深入）”；
示例：
li {
display: flow-root;
background: #f9f9f9;
padding: 12px;
}
- 无需额外 HTML 结构或伪元素
- 不影响
position: relative或z-index - 比
overflow: hidden更可靠：不会截断box-shadow或transform溢出部分
兼容老浏览器必须用伪元素 clearfix
IE8–IE11 和旧版 Android Browser 不支持 flow-root，此时得回退到经典的 ::after 清除法。但注意：不能只写 content: ""，否则在 IE8 下无效；必须加 display: table 或 display: block。
错误写法（IE8 不生效）：content: "";
正确写法：
li::after {
content: "";
display: table;
clear: both;
}
-
display: table在 IE8+ 中能触发 hasLayout，确保清除生效 - 不要用
display: block+height: 0，某些安卓 UC 浏览器会漏清 - 如果
li已设zoom: 1（IE hack），可省略伪元素，但现代项目不建议混用
浮动图文本身也得约束宽度，否则清除失效
即使 li 清除了浮动，如果里面的 img 或文字容器没设宽、又用了 float: left，它们可能溢出父 li 边界，导致视觉错位——这时清除机制“清对了”，但内容“跑偏了”。
典型表现：图片撑破 li，右侧文字被挤到下一行，但 li 高度仍正常，看起来像“清除没起作用”。
- 给浮动图片加
max-width: 100%，避免超宽图破坏布局 - 图文并排时，建议用
float: left+margin-right控制间距，而非依赖自然空格 - 更稳妥的做法：把浮动换成
display: flex，li就根本不需要清除——但这就超出“浮动图文”的前提了
