浮动导致li底部不对齐，根本原因是行框高度不一致且浮动元素不参与基线对齐；text-align和vertical-align对其无效；应改用inline-block+vertical-align:bottom或flex布局。
浮动本身不会导致“垂直排列错误”，但会让 li 脱离文档流，进而引发底部不对齐、margin-bottom 失效、顺序颠倒等视觉错位——这不是 bug，是 float 的设计逻辑决定的。
为什么 li 设了 float: left 后底部参差不齐
根本原因是行框（line box）高度不一致，而浮动元素不参与行内基线对齐。每个 li 的顶部被锚定在行框顶部，但文字行数不同（比如有的两行、有的单行），底部自然就错开了。
-
text-align对浮动元素完全无效——它只作用于行内内容，不是用来“对齐浮动块”的 - 别给
li加vertical-align：float 元素不响应这个属性 - 统一
min-height或height是最直接的兜底手段，但会牺牲内容自适应性 - 更合理的解法是放弃
float，改用display: inline-block+vertical-align: bottom，或直接上display: flex
为什么 margin-bottom 在浮动 li 上看起来没效果
不是 margin 没写上，是父 ul 塌陷了：浮动元素脱离文档流，父容器高度坍缩为 0，margin-bottom 还在，但没地方“撑开”。
- 必须给父容器加清除浮动机制，
display: flow-root是目前最干净的选择（Chrome 58+/Firefox 53+） -
overflow: hidden也能清浮，但可能意外裁剪box-shadow或下拉菜单 - 如果每行固定 4 项，可用
li:nth-child(4n) { margin-bottom: 0; }避免行末多出一倍间距 - IE8 下需触发 hasLayout：
zoom: 1或height: 1%加在父容器上
如何让左右浮动的 li 看起来“垂直居中”
你不能在 float 元素上用 align-items: center，也不能靠 vertical-align 直接生效——它们都不在同一个格式化上下文里。
- 用
line-height模拟：给父容器设固定高，再设相同line-height，仅适用于单行文字 - 用
transform: translateY(-50%)+top: 50%：需配合position: relative或absolute，且要确保父容器有明确高度 - 真正省事的做法是把整个结构换成
display: flex：align-items: center一行搞定，justify-content控制水平分布 - 如果必须保留 float（比如老项目兼容 IE8），就别碰垂直居中逻辑，改用
inline-block+vertical-align: middle更可控
为什么先给 ul 右浮动、再给 li 左浮动能“反转顺序”
这不是修复，是利用 float 渲染顺序的副作用：ul 右浮后整体右移，内部 li 左浮时仍按 HTML 顺序从左往右排，视觉上就恢复了正常顺序。
- 这种写法绕过了“
li右浮导致 DOM 顺序与视觉顺序相反”的问题 - 但它没解决塌陷、对齐、间距等底层问题，只是掩盖了顺序错位
- 现代项目中不推荐此技巧——flex 的
flex-direction: row-reverse或order属性更语义化、更可控 - 若真要用，记得给
ul加display: flow-root防止塌陷，否则后续内容会往上跑
浮动布局的“错误感”大多来自对它脱离文档流特性的误判。真正难处理的不是怎么修对齐，而是要不要继续用 float —— 如果目标浏览器支持 display: flex，那绝大多数所谓“浮动问题”，其实是一次 layout 模型升级就能绕开的旧债。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
