float: left 让 li 横向排列常失效，因 ul 默认 padding-left、父容器未清除浮动致高度塌陷，且 li 未设宽/间距/子元素 display:block；现代项目应优先用 flex 或 grid。
float: left 让 li 横向排列为什么经常失效
因为 ul 默认有 padding-left，父容器没清除浮动，且 li 本身可能被设为 display: block（默认）但没处理换行逻辑。更关键的是：浮动后父容器高度塌陷，后续元素会上移，视觉上“错乱”。
-
ul加overflow: hidden或display: flow-root防塌陷（推荐后者，现代且语义清晰） - 去掉
ul默认内边距：padding-left: 0 -
li设float: left后，记得加margin-right控制间距，否则紧贴在一起 - 如果
li内有a标签，别漏掉display: block，否则点击区域窄、垂直居中难做
float: left 在 Flexbox 时代还值得用吗
不推荐新项目用。虽然它能实现横向排列，但本质是“脱离文档流”，带来清除浮动、响应式断行、对齐控制（比如垂直居中）等额外负担。Flexbox 是专为此类布局设计的替代方案。
- 等效 Flex 写法：
ul { display: flex; flex-wrap: wrap; }+li { flex: none; } -
flex天然支持justify-content和align-items，float完全做不到垂直对齐 - 移动端适配时，
float无法自动换行或收缩，而flex-wrap: wrap可控性强得多 - IE10+ 支持
flex，若需兼容 IE9 及以下才考虑float（现在极少见）
横向列表在响应式中断行混乱怎么办
用 float: left 时，断点处常出现最后一项掉到下一行、留白不均、甚至重叠——根本原因是浮动元素宽度计算未预留间隙，且没有明确的换行触发机制。
- 给
li设固定宽度（如width: 25%）时，务必把margin算进总宽，否则超 100% 就会折行 - 改用
calc()：例如width: calc(25% - 8px)，再配margin-right: 8px - 更稳的做法：放弃
float，用display: inline-block（注意 HTML 中的换行符会变成空格）或直接切到grid/flex - 测试时在小屏下检查
li是否被截断——float不会自动压缩内容，文字溢出很常见
Chrome DevTools 里看不到 float 效果？
常见于 li 没设宽度、或父容器设置了 overflow: hidden 却忘了清除浮动，导致元素被裁剪；也可能是 CSS 优先级被其他规则覆盖（比如某处写了 float: none !important）。
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板中选中
li，看 Computed 标签下float是否为left，不是就说明被覆盖 - 检查
ul的height是否为0，是则大概率塌陷，需补清除方式 - 临时加
border: 1px solid red到li，确认是否真“消失”，还是被遮挡或透明 - 禁用所有样式后逐条启用，定位哪条规则干扰了
float
浮动布局现在只是个兼容性备选，真正要稳定控制横向列表，得靠 display: flex 或 display: grid。但如果你正在维护老项目、必须用 float: left，那每一步都要手动兜底：清浮动、控宽度、算 margin、防溢出——这些细节，一个没盯住，页面就偏了。
