浮动导致垂直导航条“断裂”的本质是父容器高度塌陷，clear: both 应加在浮动元素的下一个兄弟块级元素（如 main 或 footer）上，而非 ul 或 li；真正修复需让父容器形成 BFC，推荐 display: flow-root。
浮动导致垂直导航条“断裂”，本质是子项脱离文档流后，父容器高度塌陷，后续内容直接顶上来——clear 属性本身不能“连接”断裂的导航条，它只对**紧邻的后续块级元素**生效，加在导航内部或错误位置完全无效。
clear: both 该加在哪个元素上？
clear 不是给浮动元素自己加的，也不是加在 ul 或 nav 上就能修复塌陷。它的作用对象必须是浮动元素的**下一个兄弟块级元素**。
- 比如垂直导航栏（
ul.nav）下面紧跟一个main区域，想让main不被导航“挤偏”，就该给main加clear: both - 如果导航栏后面是
footer，而footer出现错位，那就给footer加，不是给ul.nav加 - 加在
li或a上毫无意义——它们自己就是浮动的，clear对浮动元素自身不产生布局影响
为什么给导航父容器加 clear 没用？
很多人试过给 ul.nav 自己设 clear: both，结果毫无变化。这是因为：
-
clear的语义是“避开上方浮动元素”，但ul.nav上方通常没有浮动元素，它自己又在浮动，这个声明等于没说 - 父容器塌陷的根本原因是子元素脱离文档流，
clear不解决这个问题，它只影响后续兄弟元素的位置 - 浏览器开发者工具里能看到
ul.nav的 computed height 仍是0px，证明清除失败
真正能闭合浮动、防止断裂的方案
要让垂直导航条不“断开”，关键不是靠 clear 连接，而是让父容器重新感知子项高度。以下三种方式按推荐顺序排列：
立即学习“前端免费学习笔记（深入）”；
- 首选
display: flow-root：给ul.nav或其直接父容器加此样式，兼容现代浏览器，无裁剪副作用，且语义清晰 - 次选伪元素清除：
ul.nav::after { content: ""; display: table; clear: both; }，兼容性好，不污染 DOM，比空div干净得多 - 慎用
overflow: hidden：虽能触发 BFC，但如果导航含下拉菜单或阴影，容易被意外裁剪
移动端垂直导航断裂的特殊坑
响应式垂直导航常在小屏下突然“断成两截”，往往不是浮动问题，而是：
- 父容器没设
min-height: 100vh或100dvh，flex 布局失去高度参照，内容溢出后视觉断裂 - 媒体查询中只改了
flex-direction，却忘了重置flex-wrap或子项width，导致某些项换行卡住 - 二级菜单
ul.dropdown默认display: none，展开后父容器未重绘高度——此时clear完全无能为力，得确保它是 flex 子项并参与布局流
别在 clear 上死磕；浮动导航的断裂从来不是“没连上”，而是“根本没撑起来”。真正要盯住的，是父容器是否形成了 BFC，以及它的高度是否由内容真实决定。
