float: left的li换行后卡在矮项右边是因浮动脱离文档流致父容器高度坍缩，后续浮动元素上浮填补右侧空隙；需用display: flow-root/overflow: hidden/CSS clearfix触发BFC包裹浮动子项，再以padding-bottom配合box-sizing: border-box视觉对齐，现代布局应优先采用flex或grid。
为什么float: left的li换行后会卡在矮项右边
这不是bug，是float的设计逻辑：浮动元素脱离文档流，父容器高度坍缩；当某个
父容器必须触发BFC，否则所有对齐都是徒劳
错位常伴随父
- 高度塌陷，后续内容被吸进浮动区。关键不是给每个
- 加
clear: both（那会让每项都独占一行），而是让- 能“包住”所有浮动子项：
-
display: flow-root是专为此设计的，无副作用，Chrome 58+/Firefox 53+/Safari 10.1+ 全支持 -
overflow: hidden最简，兼容IE6+，但可能意外裁剪box-shadow或下拉菜单 - 伪元素clearfix：
.clearfix::after { content: ""; display: table; clear: both; }，适合需兼容IE8的老项目 - 避免
overflow: auto——旧版Safari/IE可能触发滚动条或重绘抖动 - 测量各块文字底部到容器底的距离差
- 对内容短的
- 增加
padding-bottom（比如多加16px） - 必须配合
box-sizing: border-box，否则padding会撑大总尺寸 - 该法只改善视觉对齐，不解决父容器塌陷，仍需上一步触发BFC
-
display: grid：三行代码搞定 ——display: grid+grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)))+align-items: start -
display: flex：flex-wrap: wrap+align-items: stretch（默认），子项用flex: 1 1 280px控制宽度 - 两者天然支持内容自适应高度，无需手动干预
padding或height - 最容易被忽略的是响应式断点里的塌陷——PC正常，一缩到平板尺寸，错位突然出现，因为媒体查询里忘了重置父容器的BFC触发方式
别硬设height，用padding-bottom拉齐文字底部基线
直接写
height: 200px极易出问题：内容变长时溢出，变短时留白，响应式缩放后更难控制。真正可行的是用padding-bottom把文字“托高”对齐：现代项目应直接切到flex或grid布局
浮动不是为栅格系统设计的。现在遇到“并排+自适应+等高”，第一反应不该是调
float和clear：立即学习“前端免费学习笔记（深入）”；
-
