float 失效的根本原因是 computed 样式中 float 值为 none，常见于被高权重规则覆盖、flex/grid 容器忽略、绝对定位冲突、父容器高度塌陷或构建工具误删样式等。
float 失效不是代码写错了，而是它被别的规则压住、或布局模型根本不认 float —— 修复前先确认 computed 样式里 float 的最终值是不是 none。
为什么 float 在 Computed 面板里显示为 none
这是最直接的失效信号。不是没写，是没生效。常见原因包括：
- 被更高权重的选择器覆盖，比如
.item { float: left; }被div.item { float: none; }压住 - 内联样式中写了
style="float: none"，它会直接覆盖外部所有 CSS - 全局 reset 或框架（如 Bootstrap）自带的
.float-none类意外命中了你的元素 - 父容器设置了
display: flex或display: grid，此时子元素的float在规范中被忽略，Computed 中强制为none - 元素自身
position是absolute或fixed，浮动与绝对定位互斥，float自动作废
父容器高度塌陷导致视觉“失效”
浮动元素脱离文档流，父容器算高时“看不见”它们，结果 padding 不显、border 不见、overflow 不触发——看起来像 float 没起作用，其实是容器塌了。
- 用
display: flow-root是现代首选：语义清晰、不裁剪内容、兼容性已覆盖 Chrome 58+ / Firefox 57+ / Safari 10.1+ - 旧项目可用
overflow: auto替代overflow: hidden，避免下拉菜单被意外裁掉 - 伪元素清除法必须三件套齐全：
content: ""+display: table+clear: both；漏任一都可能静默失败 - 别在 flex/grid 容器里试图清除浮动——它本就不该存在，
float对 flex item 无效
浮动元素点不了、hover 不触发
这不是事件绑定问题，是盒模型和层叠关系错位了：
立即学习“前端免费学习笔记（深入）”；
- 加
outline: 2px solid red看高亮是否贴合文字/按钮；若缩成一条线，说明父容器仍塌陷 - 检查是否被
position: relative的兄弟容器盖住——它自动创建新层叠上下文，默认层级高于浮动流 - 临时给浮动元素加
position: relative; z-index: 1（单写z-index无效） - 运行
console.log($0.getBoundingClientRect())确认返回坐标是否与视觉位置一致；偏差大就说明有遮挡或计算误差 - 移动端尤其注意：iOS 字体缩放、X5 内核对
clear支持不稳定，优先切到display: flex
Webpack 打包后浮动“突然失效”
float 本身不会丢，但依赖它的布局逻辑容易被构建流程破坏：
- 检查打包后父容器是否还保有
display: flow-root或overflow: auto；CSS 压缩器（如 cssnano）可能把带!important的overflow: hidden简化掉，导致 BFC 失效 - 确认
cssnano没启用discardDuplicates或mergeLonghand，它们可能误删float: none这类清除规则 - 如果
package.json里设了"sideEffects": false，未被 JSimport的 CSS 文件会被 Webpack 直接剔除——哪怕你 HTML 里写了<link> - 用开发者工具打开 dist/index.html，直接查父容器的
offsetHeight；接近 0 就说明是塌陷，不是“丢失”
真正容易被忽略的是：多个失效原因常叠加出现——比如父容器是 display: flex，里面某个子元素又加了 position: absolute，同时还有内联的 float: none，Computed 面板只显示最终 none，得一层层点开样式来源才能定位根因。
