面包屑导航用 float: left 时父容器需清除浮动，否则高度塌陷；分隔符应嵌入内并设 inline-block；老浏览器兼容用 float，现代浏览器推荐 Flexbox 并用 @supports 渐进增强。
面包屑导航用 float: left 排列时，父容器必须清除浮动
直接给每个 <li> 加 float: left，看起来排好了，但父 <ul></ul> 高度塌陷——它“看不见”子元素了，后续内容会往上顶，布局错乱。这不是浏览器 bug，是浮动的天然行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给父
<ul></ul>加overflow: hidden或overflow: auto（最轻量且兼容 IE8+） - 避免用
clear: both放在父容器外，那只是把错位“压下去”，没解决塌陷根源 - 别依赖
height: auto以为能自动撑开——浮动元素脱离文档流，auto失效
分隔符（如 /）不能靠 float 单独控制，要嵌入 <li> 内部
常见错误：单独写一个 <span class="sep">/</span> 并也设 float: left，结果在某些浏览器里分隔符和文字错行、间距飘忽，尤其缩放或字体加载时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把分隔符写进前一个
<li>的末尾，比如<li>首页<span class="sep">/</span> </li> - 对
.sep设置display: inline-block+margin: 0 8px，比浮动更稳 - 如果坚持用独立标签，至少给它加
vertical-align: middle和固定line-height，否则易和文字基线不齐
float 面包屑在 Flexbox 普及后已非首选，但仍有兼容性刚需
IE9 及以下不支持 display: flex，若项目需兼容这些老环境，float 仍是可靠方案；但若只支持 IE10+，强行用 float 反而增加维护成本。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (display: flex)做渐进增强，现代浏览器走 Flex，老浏览器回退到 float - 不要混用：同一套面包屑里既写
float又写flex，CSS 层叠容易互相覆盖 - 移动端视口缩放时，
float元素可能因宽度计算误差导致换行，建议所有<li>设white-space: nowrap
最后一个 <li> 必须显式取消浮动，否则影响后续布局
很多教程漏掉这点：全部 <li> 都 float: left，结果页面下方其他区块被“卡住”，看似没关联，实则是浮动溢出影响了后续普通流元素的定位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给最后一个
<li>单独加类，比如<li class="last">，再写.last { float: none; } - 或者用 CSS 伪类：
li:last-child { float: none; }（注意 IE8 不支持:last-child） - 更稳妥的做法是统一用
overflow: hidden清除父容器浮动，而非依赖单个元素取消 float
