父容器高度塌陷需触发BFC，如overflow: hidden；nav折行因总宽超限，应重置ul内外边距并检查box-sizing；IE兼容需设display: block；新项目优先用flex布局。
float 实现左右分栏时，父容器高度塌陷怎么办
浮动元素会脱离文档流，导致父容器无法自动包裹它们，导航栏看起来“没高度”，下面的内容直接顶上来了——这是最常遇到的问题。
- 必须给父容器（比如
<nav>或<header>）触发 BFC，最直接的是加overflow: hidden或overflow: auto - 别用
height: 100px这类固定高度硬撑，一旦字体大小或 padding 变了，就会错位 -
clear: both放在父容器外部（比如下一个<div>上）不能解决父容器自身塌陷，它只影响后续兄弟元素
logo 左浮动 + nav 右浮动，为什么 nav 总被挤到下一行
本质是容器宽度不够：两个浮动块加起来超出了父容器可用宽度，浏览器只能折行。不是代码写错了，是空间算少了。
- 检查
logo和nav的总宽度（含padding、border、margin），尤其注意默认ul有margin-block（现代浏览器）或margin-top/margin-bottom（老写法） -
nav内部的ul建议重置：margin: 0; padding: 0;，再用display: flex或inline-block排列li，避免浮动嵌套 - 如果用了
box-sizing: border-box，确认它已应用到所有浮动子元素上，否则padding会额外撑宽
IE6–8 下 float 导致文字被“吃掉”或换行错乱
老 IE 对 float 和 inline 元素混排极其敏感，常见于 logo 图片旁的文字或 a 标签内嵌 span。
- 给所有参与浮动的元素显式设置
display: block（哪怕它是a或span） - 避免对
img单独浮动，改用包裹它的<div>或<a>浮动；并确保img没有默认的vertical-align: baseline引起基线偏移 - 如果导航链接在 IE 下垂直位置偏低，给
nav内的a加display: block和line-height对齐
float 方案和 flex 替代方案该怎么选
纯顶部导航这种简单布局，float 能跑通，但维护成本比 flex 高得多——尤其要兼容老浏览器时，各种 hack 和边界 case 会越来越多。
立即学习“前端免费学习笔记（深入）”；
- 如果项目必须支持 IE9 及以下，
float是稳妥选择，但得接受写更多防御性 CSS - 如果最低支持 IE10+，优先用
display: flex：父容器设justify-content: space-between，logo 和 nav 自然分居两侧，无塌陷、无折行、无清除问题 - 别为了“练手”在新项目里硬用
float做导航——它本就不是为这种布局设计的，只是历史原因被借用了
浮动本身不难，难的是它引发的连锁反应：塌陷、折行、IE bug、响应式断裂……这些细节堆在一起，比写几行 flex 耗时多得多。
