浮动布局虽被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; —— 这些值非法，会被忽略
