浮动列表项底部多出空白是因float使脱离文档流，而仍按行内格式化上下文（ifc）的基线对齐规则计算高度，残留x-height或line-height空间；解决需改变父容器格式化上下文（如overflow:hidden、display:flex）或清除浮动，而非修改的display。
浮动列表项底部多出空白是怎么回事
这是 float 和行内格式化上下文（IFC）共同作用的结果：<li> 默认是 display: list-item，本质属于行内级元素；一旦设 float: left，它会脱离文档流，但父 <ul></ul> 仍按“最后一行有基线对齐需求”来计算高度，导致底部残留空白（通常是字体 x-height 或 line-height 的一部分）。
- 不是 margin/padding，清不掉
- 不是浏览器 bug，是 CSS 规范定义的行为
- 哪怕所有
<li>都浮动了，父容器依然可能撑不开、高度为 0
display: block 能解决吗？为什么常被误解
单独给 <li> 加 display: block 几乎没用——它本来就是块级行为，浮动后更不依赖 display 类型。真正起作用的是**改变父容器的格式化上下文**或**清除浮动影响**。
-
display: block对<li>本身无实质改善，别白加 - 有效方案是让父
<ul></ul>形成 BFC（如overflow: hidden）或用display: flex - 如果硬要用 float 布局，必须配
clearfix或伪元素清除，否则父容器塌陷
现代写法推荐：用 flex 替代 float
浮动本就不是为布局设计的，CSS2.1 时代用来实现多列是权宜之计。现在 display: flex 是更可控、语义更清晰的选择，且天然规避底部空白问题。
- 给
<ul></ul>加display: flex，<li>自动成为 flex item，无需 float - 用
flex-wrap: wrap支持换行，gap控制间距，比margin更可靠 - IE10+ 支持良好；若需兼容 IE9 及以下，才考虑 float + clearfix 组合
ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
li {
/* 不需要 float，也不需要 display: block */
}
如果非得用 float，怎么收尾才不翻车
老项目维护或特定兼容场景下，float 仍可能出现。此时关键不是修 <li>，而是管住父容器和清除逻辑。
- 父
<ul></ul>必须有清除机制：::after伪元素 +clear: both是最稳妥的 - 避免用
height或min-height硬撑高，会导致响应式失效 - 检查是否意外触发了
vertical-align: baseline（比如<li>里有图片），可加vertical-align: top临时缓解
浮动列表的“底部空白”本质是格式化上下文遗留问题，不是样式写错了。盯着 <li> 改 display 很难见效，得从父容器的渲染模式入手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
