float实现的tab头部点不动、对不齐，因float使元素脱离文档流致父容器高度塌陷，引发点击错位、下划线偏移、hover失效；需用overflow:hidden或height撑开父级，li设display:block，a加display:block和text-decoration:none，并注意CSS优先级与IE8兼容处理。
float实现的tab头部为什么点不动、对不齐
因为float会让元素脱离文档流，父容器高度塌陷，导致点击区域错位、下划线无法对齐、hover失效。常见表现是：鼠标悬停没反应、选项卡文字和边框错位、切换时内容区“跳一下”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
ul容器加overflow: hidden或height（比如height: 40px）来撑开父级，避免塌陷 - 每个
li必须设display: block，否则a标签默认是行内元素，width/height不生效 -
li不要只靠float: left排布，得补margin-right或border-right做间隔，否则紧贴在一起难点击 - 若用
a做触发器，记得加text-decoration: none和display: block，不然点击热区只有文字部分
float-tab如何响应式断行又不乱序
纯float在小屏下会直接换行堆叠，顺序错乱（比如第4个li跑到第1个下面），且无法控制“最多显示3个”。这不是bug，是float的天然行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
min-width限制每个li最小宽度，配合容器white-space: nowrap+overflow-x: auto强制横向滚动，比断行更可控 - 真要断行，就别用
float——改用display: inline-block+vertical-align: bottom，再用媒体查询设width: 100%触发换行 - 如果必须用
float且需断行，只能靠JS监听window.resize动态增删class，然后CSS里写.tab-compact li { float: none; width: 100%; }
active状态样式总覆盖不掉默认链接色
因为a:link和a:visited的优先级常高于.active a，尤其当CSS顺序没写对时，浏览器按就近原则渲染，active样式直接被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
.active a写在所有a规则之后，或者加!important（仅限调试，上线前应重构选择器） - 推荐写法：
.tabs li.active a, .tabs li a:hover，统一处理激活态和悬停态，避免重复声明 - 颜色不是唯一问题——下划线位置偏移、背景色没填满，往往是因为
a没设padding或box-sizing: border-box，导致内容区和视觉区不重合
IE8兼容下float-tab的line-height异常
IE8对line-height继承计算有偏差，尤其当li设了float又没明确height时，文字会垂直偏上或偏下，看起来像“悬浮”。这不是字体问题，是IE8盒模型解析缺陷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
li显式设置height（比如height: 42px），并确保line-height与之相等（如line-height: 42px） - 避免用
em或rem设line-height，IE8不支持rem，em在嵌套float中容易放大误差 - 如果项目必须支持IE8，直接放弃
line-height居中，改用padding-top+padding-bottom手动调
float做tab头部现在看是种权衡：它不用JS、兼容老浏览器，但维护成本高、响应式吃力、父子尺寸关系脆弱。真正容易被忽略的是——一旦加了transform或position: relative到任意一层，整个浮动流就可能意外重排。动手前先想清楚，这个tab到底要不要支持窄屏、要不要键盘导航、会不会动态增删项。
