用Flex替代float是降低维护成本最有效的办法；浮动本就不是为复杂布局设计，易引发塌陷、间距错乱、响应式脆弱等问题，而Flex从容器层统一控制排列、对齐与伸缩，代码更少、意图更明。
用 float 做导航条不是不能跑，而是维护成本高、响应式脆弱、容易连锁出错——现代项目里真没必要扛着它走。
float 导航必须处理父容器塌陷
所有 li 设了 float: left 后，ul 高度直接变成 0。这不是“没写好”，是 float 的行为本质：脱离文档流。结果就是背景色消失、边框压成一条线、后续内容上浮盖住菜单。
- 最稳妥的修复是给
ul加display: flow-root（Chrome 64+/Firefox 58+ 支持） - 兼容 IE11？改用伪元素
.clearfix::after，但必须带content: ""和display: block - 别用
overflow: hidden—— 它会意外裁剪下拉菜单、阴影、transform位移后的内容
项间距必须用 margin，不是 padding
给 li 加 padding-right 看似能拉开距离，实际会让最后一项右边多出空白，小屏下极易溢出。因为 padding 是撑开自身内容区，而兄弟元素间距该由 margin 控制。
- 正确写法：
li:not(:last-child) { margin-right: 16px; } -
padding只用于调整文字和边框距离，比如让a标签内文字不贴边 - IE6–7 有双倍
marginbug，需加display: inline到浮动元素上（仅限该环境）
float 导航在响应式下极难收口
float 元素默认不换行，也不自动收缩。靠 @media 切 float: none + width 调整，稍有尺寸误差或字体缩放，最后一项就掉行。这不是媒体查询写得不够细，是 float 本身缺乏弹性。
立即学习“前端免费学习笔记（深入）”；
- 小屏建议直接切布局模式：
display: block+text-align: center，或整个换成display: flex - 如果坚持用
float，断点处必须加clear: both防止错位，且要检查所有margin/padding/border是否统一用了box-sizing: border-box - 子菜单（下拉）若也用
float，父级li必须显式设position: relative，否则定位失准
Flex 替代 float 的真实收益在哪
不是“新潮所以要用”，而是三栏对齐、顺序调整、响应式折叠这些事，flex 一行属性就能搞定，float 得绕七八个弯。
- 对齐：
justify-content: space-between直接两端对齐，不用算margin或塞float: right - 顺序：
order属性改数字就行，不用动 HTML 结构或重写 CSS - 折叠菜单：
flex-direction: column+display: none控制可见性，比 JS 切float安全得多
真正容易被忽略的是：很多所谓“兼容旧浏览器”的需求，其实只是没清理掉历史浮动逻辑。一旦开始用 flex，就别再往里面掺 float——哪怕只有一处，也会让清除逻辑、盒模型计算、动画性能全部变不可控。
