IE8–IE11中aside用float:right塌陷是因为浮动元素脱离文档流，父容器未触发hasLayout或清除浮动导致高度坍缩为0，main内容从顶部渲染并视觉上“掉入”aside下方。
aside用float:right在IE8–IE11中为什么会塌陷
因为浮动元素脱离文档流，而父容器若没触发hasLayout或没清除浮动，高度会坍缩为0——main内容直接从顶部开始渲染，视觉上“掉进”了aside下方。这不是aside写错了，是父容器没兜住它。
常见现象：main文字绕到aside右侧、整个侧栏被压扁、小屏下横向溢出但没滚动条。
- 必须给父容器加
overflow: hidden或zoom: 1（IE专有）触发hasLayout - 避免只靠
float: right，得配width（如width: 280px），否则IE6–IE7按内容撑宽，可能突破容器 -
margin-left不能省：给main加margin-left: 280px，防止文字绕进侧栏
IE8及以下不识别aside标签怎么办
IE8及更早版本把aside当未知标签，既不渲染默认样式，也不出现在DOM树里——document.querySelector('aside')返回null，CSS规则全失效。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 在
<head>里加条件注释加载html5shiv.min.js：<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - CSS里补一句
aside { display: block; }，否则IE9–IE11中仍当内联元素处理 - 别指望
aside自动获得语义作用——读屏器和SEO权重依赖JS注入后的DOM结构，旧IE里得靠额外标记（如role="complementary"）兜底
float布局在响应式场景下的硬伤
用float实现侧栏，在小屏断点下很难自然回流：设display: block后，margin-left残留会导致main左侧留白；清浮动的clearfix类在IE6–IE7中常失效。
更稳妥的做法：
- 小屏下（
@media (max-width: 768px)）直接移除float，改用width: 100%+margin-top: 1.5rem让aside沉到main下方 - 禁止用
display: none隐藏aside——读屏器会跳过，法律声明或版权信息就等于被删了 - DOM顺序必须和视觉顺序一致：如果HTML里
aside写在main前面，就得加order: 2（配合Flex降级方案），否则键盘Tab焦点会先落到侧栏
为什么现代项目还值得花时间修float兼容
不是为了支持IE，而是因为某些政府/银行内网系统仍在跑IE11，且禁用JavaScript执行——polyfill和Flex/Grid回退方案全部失效，只剩原生HTML+CSS能用。
这时候真正起效的只有三件事：
-
DOCTYPE顶格写，确保不进怪异模式 -
float+width+overflow: hidden父容器三件套 -
aside内容必须精简，避免嵌套div或section——IE6–IE7对块级元素嵌套的表格渲染极不稳定
语义边界比布局更难修复：一旦aside被错误塞进main内部，即使CSS调好了，读屏器仍会把它当成正文的一部分播报。
