用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 有双倍 margin bug，需加 display: inline 到浮动元素上（仅限该环境）

float 导航在响应式下极难收口

float 元素默认不换行，也不自动收缩。靠 @media 切 float: none + width 调整，稍有尺寸误差或字体缩放，最后一项就掉行。这不是媒体查询写得不够细，是 float 本身缺乏弹性。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 小屏建议直接切布局模式：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——哪怕只有一处，也会让清除逻辑、盒模型计算、动画性能全部变不可控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！