浮动布局虽被Flexbox和Grid取代，但在老项目维护中仍需关注IE6–IE8盒模型、双倍边距Bug（需display:inline修复）、父容器塌陷（用*zoom:1+after伪元素或overflow:hidden）、行内化对齐异常（vertical-align失效、图片间隙）及Firefox/Safari细微差异。

浮动布局在现代 CSS 中已基本被 Flexbox 和 Grid 取代，但在维护老项目或处理特定兼容场景时，仍需了解其跨浏览器表现差异。核心问题集中在 IE6–IE8 的盒模型、清除浮动方式、行内块级化行为及父容器高度塌陷的处理上。

IE6/IE7 的双倍边距 Bug

当浮动元素设置了 margin-left 或 margin-right，IE6/IE7 会将其值翻倍。这是因浮动触发了“hasLayout”，同时解析 margin 出错所致。

• 解决方法：给浮动元素添加 display: inline;（仅 IE6/7 识别，不影响其他浏览器）
• 避免对浮动元素直接设左右 margin，改用 padding 或外层包裹控制间距
• 使用条件注释或 CSS hack（如 *margin-left: 10px;）针对性修复

父容器高度塌陷的兼容写法

浮动元素脱离文档流，导致父容器无法自动包含高度，在所有浏览器中均存在，但清除方式支持度不同。

• IE6/7 不支持 ::after 伪元素，因此 clearfix 的现代写法（content: "" + clear: both）无效
• 兼容方案：使用 overflow: hidden; 或 overflow: auto;（注意可能意外裁剪或出现滚动条）
• 经典 clearfix（兼容 IE6+）：
  

浮动元素的“行内化”与垂直对齐异常

浮动元素默认表现为类似行内块的行为，但在 IE6/7 中 vertical-align 不生效，且文字环绕时基线对齐逻辑不一致。

• 图文混排时，建议统一设置 vertical-align: top/middle; 并配合 line-height 控制
• 避免依赖浮动元素的默认 baseline 对齐，显式设置对齐方式更可靠
• IE6 下图片浮动后下方多出空白间隙，可设 font-size: 0; 或 display: block; 消除

Firefox 与 Safari 的细微差异

现代浏览器对 float 支持良好，但仍有边界情况：

• Firefox 在某些嵌套浮动中会提前换行（尤其当容器宽度临界时），可尝试加 min-width 或调整子元素 white-space
• Safari（旧版 WebKit）对 float + margin-collapse 处理略保守，相邻浮动块间 margin 可能未合并
• 所有浏览器均不支持 float: center; 或 float: bottom; —— 这些值非法，会被忽略