旧版浏览器浮动解析差异的关键在于块化、盒模型和清除时机：必须为浮动元素显式添加display: block；统一使用box-sizing: border-box防止溢出；清除浮动需确保清除元素为块级且正确嵌套，避免依赖clear: both单点修复。
旧版浏览器（尤其是 Firefox 3.6–15、IE6–11、Android 4.x WebView）对 float 的解析差异不是“bug 多”，而是规范实现节奏不一致——稳定它的关键不是堆 hack，而是掐住三个确定性支点：块化、盒模型、清除时机。
必须给浮动元素加 display: block
旧版 Firefox 和 IE6/7 不会自动把 inline 元素（比如 <img> 或未设 display 的 <span></span>）在加 float 后转为块级。结果就是它仍按行内逻辑参与换行计算，导致“明明宽度够却掉行”。
常见错误现象：
-
<img src="..." style="max-width:90%">下方多出空白，或右侧文字无法紧贴 - 多个
float: left的<div> 在 Firefox 中总宽 99.99% 就换行，Chrome 却能挤下<p>实操建议：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>所有浮动元素显式声明 <code>display: block（哪怕它本就是<div>）<li>图片浮动时，优先用 <code>img { display: block; float: left; }，而非依赖默认行为 - 避免对
<button></button>、<a></a>等替换元素直接加float，先设display: inline-block或block - 多列布局（如三栏
width: 33.333%） - 带边框/内边距的卡片、导航项
- 任何需要精确横向占满父容器的浮动组合
- 全局重置：
* { box-sizing: border-box; }（IE8+ 支持，覆盖所有旧环境） - 不依赖
calc()计算浮动宽度——旧 Safari 和 Android WebView 解析不稳定 - 若必须用 margin 分隔，改用负 margin + 内边距组合，而非靠 width - margin 算术
- 把
clear: both加在浮动元素自己身上 → 完全无效 - 用空
<div class="clear"></div>但没设display: block→ 在某些 Android WebView 中不触发清除 - 在
position: relative父容器里清除，而清除元素又在另一个 stacking context 中 → Firefox 误判清除范围 - 优先用
display: flow-root（Chrome 64+/Firefox 58+），一行解决，无副作用 - 需兼容 IE11 或旧 Safari？用经典
.clearfix：.clearfix::after { content: ""; display: table; clear: both; }+.clearfix { *zoom: 1; } - 清除元素必须是块级、已渲染、未被隐藏；若它是
<span></span>，先加display: block - 三栏浮动，每栏
width: 33.333%+margin-right: 10px，第三栏必掉行 - 导航项 hover 时突然“跳一下”，其实是 margin 翻倍后重排
- IE6：仅对出问题的元素加
*display: inline;（星号前缀仅 IE6 识别） - Android 4.x：避免在浮动元素上直接写
margin，改用父容器padding或子容器margin控制间隙 - 检测手段：用 Chrome DevTools 模拟 Android 4.3，手动缩窄 viewport 到临界像素值，看是否突变
box-sizing: border-box 是浮动不溢出的底线
旧浏览器对 box-sizing: content-box 下的 padding + border 溢出容忍度极低。一个 width: 50% + padding: 10px 的浮动栏，在 Firefox 12 或 Android 4.3 里大概率直接被判定“放不下”，第二栏掉行。
使用场景：
实操建议：
清除浮动别只信 clear: both，得看它清在哪
clear: both 只对「紧挨着它的前一个浮动兄弟元素」生效。旧浏览器更严格：如果清除元素是 <div> 但父容器设了 <code>font-size: 0，它的 line-height 会被压成 0，clear 彻底失效；如果清除元素自身有 margin-top，且小于浮动元素的 margin-bottom，两个 margin 会被合并，导致“清不到头”。
容易踩的坑：
实操建议：
安卓 WebView 和 IE6 的双倍 margin Bug 必须单独处理
Android 4.1–4.3 和 IE6 都存在同一个底层问题：对已设 float: left 的元素再加 margin-left 或 margin-right，实际渲染为两倍值。这不是样式写错，是渲染引擎历史遗留行为。
典型表现：
实操建议：
真正麻烦的从来不是某一行清除代码写没写对，而是浮动本身在旧浏览器中和 line-height、white-space、sub-pixel 四舍五入、hasLayout 触发条件这些底层机制耦合太深——稍一松动，整条链就抖。所以当你要同时支持 Firefox 12、IE11、Android 4.4，还要求滚动不抖、缩放不乱，最省事的“稳定方案”，其实是删掉所有 float，换 display: flex。
