浮动导航条塌陷的根本原因是float使子元素脱离文档流，导致父容器高度为0；解决方法包括触发BFC（如overflow:hidden）、使用flex布局或clearfix伪元素清除。
浮动导航条内容塌陷、父容器高度为0
这是浮动最典型的副作用：float 元素脱离文档流，导致其父容器无法自动包裹高度。常见现象是导航条看起来“悬浮”在页面上，下方内容顶上来，或者整个导航区域在开发者工具里显示高度为 0px。
根本原因不是导航条“错位”，而是父容器“不知道自己该有多高”。解决方向只有两个：让父容器重新感知浮动子元素的高度，或彻底绕过浮动布局。
- 优先用
clear清除浮动时，必须在浮动元素的**末尾插入一个清除元素**，例如： - 更推荐给父容器（如
.nav）设置overflow: hidden或overflow: auto—— 这会触发 BFC，自然包含浮动子元素，且无需额外 DOM 节点 - 注意
clear: both只对**紧邻的后续块级元素**生效，如果把它写在li上，对父容器高度无影响
position: absolute 导致导航条脱离布局流
用 position: absolute 强行把导航条“钉”在某个位置，看似解决了错位，实则埋下更大隐患：它不再占据空间，下方内容会直接上移覆盖，响应式断点也容易失效。
除非你明确需要固定定位（比如吸顶导航），否则不建议仅为了“不塌陷”而滥用 absolute。
