浮动布局“失效”实为浮动脱离文档流引发的副作用，如父容器塌陷、兄弟元素错位、样式被覆盖或浏览器兼容问题。
浮动布局“失效”，通常不是 float 属性没起作用，而是它带来的副作用让页面表现不符合预期——比如父容器塌陷、后续元素错位、背景/边框不显示等。本质是浮动元素脱离了文档流，而周围元素没有做相应处理。
父容器高度塌陷
这是最典型的表现：给子元素加了 float: left 或 float: right，父容器却“看不见”它们的高度，表现为边框包不住内容、背景色消失、下边距失效等。
- 原因：浮动元素脱离正常文档流，父容器计算高度时忽略它们
- 验证方法：给父容器加 border: 1px solid red，会发现边框只有一条细线或完全不包裹子元素
- 注意：即使子元素设置了宽高，只要没清除浮动，父容器仍可能高度为 0
后续兄弟元素位置异常
浮动元素之后的块级元素本该换行，却“卡”在浮动元素旁边；或者行内内容环绕异常，甚至被遮挡。
- 常见于：div + div 结构中，第一个 div 浮动，第二个 div 没做 clear 处理
- 特别容易发生在响应式断点切换后，或使用 inline-block / flex 混搭时
- 如果后续元素也设置了 float，但方向不同（如 left + right），可能相互挤压或错位
浮动被其他 CSS 规则覆盖或禁用
看似写了 float，实际没生效，往往是被更高优先级样式或冲突属性压制。
立即学习“前端免费学习笔记（深入）”；
- position: absolute 或 position: fixed 会直接忽略 float，两者不可共存
- display 值为 flex、grid、table-cell 等时，float 会被浏览器忽略（CSS 规范明确要求）
- 选择器权重不足：比如用类名写的 .item { float: left } 被更具体的规则（如 #wrap .item 或带 !important 的其他声明）覆盖
浏览器兼容与渲染上下文干扰
尤其在旧版 Edge、IE 或某些移动端 WebView 中，浮动行为可能不稳定。
- 父容器触发了 BFC（块级格式化上下文），但方式不兼容（如 overflow: visible 是默认值，不触发 BFC）
- 祖先元素有 transform、filter、will-change 等属性，意外创建了新的层叠上下文或 BFC，影响浮动包含关系
- HTML 结构不规范，比如浮动元素外层缺少闭合标签、或嵌套在 table / form 等特殊语义容器中
