float:left列表项卡位是因高度不一致与父容器高度坍缩所致，clear:both无效因不修复bfc缺失，推荐flex/grid布局替代浮动。
float:left 列表项卡位是高度不一致 + 文档流坍缩的必然结果
不是样式写错了，是 float 的设计逻辑在起作用：所有 float: left 的 li 都脱离文档流，父 ul 高度坍缩为 0，矮项右侧留下空白，后续项直接“上浮”钻进去——第 4 个 li 卡在第 3 个右边，就是典型表现。
为什么 clear:both 对卡位基本无效
clear: both 只控制「当前元素的上边界避开浮动」，它不改变父容器对子项高度的感知能力。即使每个 li 都加了 clear: both，它们仍各自浮动、各自脱离流，父 ul 还是塌的，卡位照旧。
- 常见误操作：给每个
li加clear: both→ 结果是全部垂直堆叠，失去横排意图 - 真正该加
clear的地方是「需要换行起点重置」的容器（比如每 3 项后加一个div），但这是补丁，不是解法 - 更稳的方式是让父
ul自身建立 BFC，而不是靠子项互相清理
盒模型计算误差会放大卡位问题
哪怕视觉上看着宽度刚好，float 布局对总宽度极其敏感：四舍五入、border/padding 未计入 box-sizing、父容器 padding 干扰，都可能导致某一行总宽 > 100%，最后一项被挤下去——这时你看到的“卡位”，其实是“掉行”。
- 必须设
box-sizing: border-box在所有li上 - 用
calc()算宽度时，要显式扣掉所有间隔（例如 4 列 + 3 × 12px 间隙 → 宽度 =calc(25% - 9px)） - HTML 中
li标签之间不能有换行或空格，否则渲染器插入约 4px 间隙，悄悄吃掉可用宽度
现代项目里，卡位问题本质是工具误用
你花时间调 clear、overflow、vertical-align，不如三行 CSS 切到语义清晰的布局模型。浮动不是为栅格排列设计的，它是为图文环绕服务的。
- 横排列表 →
ul { display: flex; flex-wrap: wrap; }+li { flex: 0 0 calc(25% - 8px); margin: 0 4px; } - 响应式卡片栅格 →
ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))); gap: 16px; } - 如果必须兼容 IE9 及以下，用
li { display: inline-block; vertical-align: top; }，比float更可控
真正容易被忽略的是：卡位现象在 PC 端正常，一缩到平板尺寸就爆发——因为媒体查询里忘了重置父容器的 BFC 触发方式，或者 grid/flex 的断点没覆盖到实际容器宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
