浮动布局仅适用于需兼容ie8–9的老项目；新项目应使用flex或grid。右栏掉行因float使左栏脱离文档流，右栏仍占整行，需触发bfc（如overflow:hidden）或设margin-left留位，且父容器须清除浮动。
浮动式左右两栏布局现在能用，但只该用在必须兼容 IE8–9 的老项目里；新项目直接上 display: flex 或 display: grid，省心又可控。
为什么只设 float: left 左栏，右栏会掉到下一行？
因为 float 本质是让元素“脱离文档流”，但不自动给其他元素留空——右栏仍是普通块级元素，渲染时从顶部开始占满整行，被左栏“盖住”或“挤下去”。它不会聪明地绕开，除非你主动干预。
- 右栏必须触发 BFC（如加
overflow: hidden）或用margin-left硬留位 - 父容器必须清除浮动，否则高度塌陷，后续内容会上浮覆盖两栏
- HTML 结构顺序不能颠倒：
<div class="sidebar"></div> <div class="main"></div>是唯一有效顺序
overflow: hidden 和 margin-left 哪个更适合右栏？
优先选 overflow: hidden：它让右栏形成独立格式化上下文，自动绕开浮动区，左侧宽度变化时无需改右栏样式；但要注意它会裁剪 position: absolute 子元素或溢出的 box-shadow。
-
margin-left: 200px：简单，但左侧宽度一变，就得同步改这个值，维护成本高 -
overflow: hidden：响应式友好，IE6/7 下不稳定，需补zoom: 1或伪元素清除法 - 若右栏含弹层、下拉菜单等绝对定位内容，只能用
margin-left
父容器怎么正确清除浮动？
光写 clear: both 在额外 div 上只是“表面解决”，真正要的是让父容器重新包裹浮动子项。推荐两种可靠写法：
- 伪元素法：
.container::after { content: ""; display: table; clear: both; }—— 兼容 IE8+，无副作用 - BFC 触发法：
.container { overflow: hidden; }或.container { zoom: 1; }（IE6/7）—— 注意overflow: hidden可能截断内容 - 避免用
clear: both放在右栏后面：它只清浮动影响，不解决父容器塌陷
真正难的不是写对那几行 CSS，而是理解 float 不是布局工具，而是文本环绕机制——所有“布局效果”都是借了它的副作用。一旦需求变复杂（比如等高、响应式切单列、嵌套浮动），这套逻辑就容易崩。所以别花时间优化 float，该换就换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
