浮动布局中主内容塌陷是因父容器未包裹浮动子元素，需用伪元素清除浮动或display: flow-root；侧边栏右置可保持HTML顺序利于SEO；响应式需媒体查询重置float；float仍适用于IE兼容、文字环绕等场景。

侧边栏用 float 布局，主内容会塌陷？必须清浮动

直接对 aside 和 main 分别设 float: left 或 float: right，主内容区域高度常为 0——因为父容器没包裹浮动子元素。这不是 bug，是 float 的原始行为。

必须在父容器末尾插入清除浮动的元素，或用伪元素方案：

• 推荐用 ::after 伪类：给父容器（如 div.container）加 overflow: hidden 或更稳妥的 display: flow-root（现代浏览器支持良好）
• 若需兼容 IE8+，可写：

  .container::after {
    content: "";
    display: table;
    clear: both;
  }

• 避免用 <div style="clear:both"></div> 这种冗余 HTML，语义和维护性都差

float 左右顺序决定 DOM 结构要不要调换

如果侧边栏要显示在右侧，但希望它在 HTML 中写在主内容之后（利于 SEO 和可访问性），float: right 可以让它视觉右置，无需调整 DOM 顺序。

但要注意：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 主内容 div.main 必须设宽度（如 width: 70%），否则可能被侧边栏挤到下一行
• 侧边栏 div.aside 若设 float: right; width: 30%，主内容建议也显式设 float: left，不要依赖文档流“自动绕行”——IE 下行为不一致
• 两块都 float 时，宽度之和不能超过父容器（记得减去 padding/margin）

响应式断点下 float 会失效？得主动重置

float 本身无响应能力，小屏时你不能指望它自动变成垂直堆叠。必须配合媒体查询手动干预：

• 在 @media (max-width: 768px) 中，把 float 全部设为 none，再用 width: 100% 让它们独占一行
• 注意清除之前加的 ::after，否则可能多出空行；可统一用 display: block 覆盖
• 若侧边栏在移动端要隐藏，别只靠 display: none，同时确保主内容宽度恢复为 100%，否则留白

为什么现在还用 float 实现侧边栏？真有它的不可替代场景

不是所有项目都能用 flex 或 grid：老系统要兼容 IE9、嵌入式 CMS 模板锁定 HTML 结构、或需要文字环绕侧边栏（比如图文混排的新闻页）。

这时 float 是唯一能自然实现文字环绕的 CSS 方案：

• img 或 aside 设 float: left，旁边段落文字会自动贴边排列
• flex 和 grid 都无法让文本流“绕过”容器，只能靠 JS 拆分段落，成本高得多
• 只要浮动元素有明确宽高（且不设 position: absolute），这种环绕就稳定可靠

真正容易被忽略的是：浮动元素的 margin-collapse 会消失，相邻块级元素的上下 margin 不再合并——这在调试间距时经常让人困惑几秒。