ie11浮动布局崩溃主因是清除逻辑与盒模型行为差异：不支持display: flow-root；clearfix需用display: table+*zoom: 1或display: block+overflow: hidden；overflow: hidden易裁剪绝对定位内容；须显式设box-sizing: border-box并注意clear元素需在正常流中。
IE11 下浮动布局“崩溃”，通常不是 float 本身失效，而是清除逻辑或盒模型行为与现代浏览器不一致——尤其是伪元素清除法、display: flow-root 和 overflow: hidden 在 IE11 中表现割裂。
IE11 不支持 display: flow-root，别白费劲
你在 Chrome 里加 display: flow-root 能完美触发 BFC、撑开父容器，但在 IE11 中这条声明直接被忽略，父容器继续塌陷。这不是 bug，是标准支持缺失（IE11 发布时该属性尚未进入草案）。
- 必须删掉所有
display: flow-root，它在 IE11 中等于没写 - 不要指望 Autoprefixer 补出兼容写法——
flow-root没有 -ms- 前缀，也无法降级 - 若项目已用
flow-root，需为 IE11 单独加@supports not (display: flow-root)回退到伪元素方案
clearfix 伪元素在 IE11 必须带 *zoom: 1
仅用 ::after { content: ""; display: table; clear: both; } 在 IE11 中大概率无效——因为 IE 的 hasLayout 机制未被触发，父容器仍无法“感知”浮动子项高度。
- 必须补上
*zoom: 1（IE 私有属性，仅 IE6–IE7 识别）或_zoom: 1（IE6–IE8），但 IE11 不吃这套 - 真正对 IE11 有效的写法是：
::after { content: ""; display: block; clear: both; height: 0; overflow: hidden; } - 更稳妥的通用 clearfix（兼容 IE8+）：
.clearfix::before,<br>.clearfix::after {<br> content: "";<br> display: table;<br>}<br>.clearfix::after { clear: both; }<br>.clearfix { *zoom: 1; }其中*zoom: 1对 IE11 无影响，但确保 IE8/9 兼容；而display: table在 IE11 中能可靠触发 hasLayout
overflow: hidden 在 IE11 可能截断绝对定位内容
你为了快速修复塌陷，在父容器加了 overflow: hidden，结果发现下拉菜单、Tooltip、position: absolute 的弹层被裁掉——这在 IE11 中比其他浏览器更敏感。
- IE11 对
overflow: hidden的裁剪边界计算更严格，哪怕子元素用了transform: translateZ(0)或will-change: transform也难绕过 - 如果父容器内有
box-shadow、border-radius或outline，IE11 可能将其一并裁剪 - 临时验证方式：把
overflow: hidden改成overflow: auto，看是否恢复显示——若恢复，说明是裁剪问题，而非清除失败
float 元素宽度超限在 IE11 更容易暴露
你写了 width: 33.333% + padding: 10px，Chrome 下靠 box-sizing: border-box 撑住，IE11 却突然换行——不是 IE11 不支持 border-box，而是某些旧 CSS 重置漏掉了它，或被更高优先级规则覆盖。
- IE11 默认使用
box-sizing: content-box，且不会继承父级的border-box设置 - 必须对所有参与浮动的元素显式声明：
box-sizing: border-box，不能只靠全局重置 - 检查是否有
input、textarea或第三方组件样式重置了box-sizing（如 Normalize.css 早期版本会设input { box-sizing: border-box; }，但漏掉div） - 图片记得加
display: block，否则 IE11 会保留 inline 元素底部空白，导致高度计算偏差
最易被忽略的一点：IE11 对 clear: both 的解析依赖于元素是否在正常流中。如果你把 clear: both 加在一个 position: relative 且设置了 top 的元素上，IE11 可能跳过清除逻辑——它只认“纯块级、无位移、无 transform”的清除占位。所以，别图省事用 margin-top 模拟清除，老老实实插伪元素或空 div。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
