浮动左右分栏需用float:left和float:right分别设置宽高，并为父容器触发BFC（如overflow:hidden或display:flow-root）以防止塌陷；现代布局推荐Grid或Flexbox替代。
浮动元素左右分栏的基本结构怎么搭
用 float: left 和 float: right 实现左右分栏，核心是让两个块级元素分别贴左、贴右，且父容器能正确包裹它们。但直接写会出问题：父容器高度塌陷，后续内容会上浮覆盖。
常见错误现象：
.container { }
.left { float: left; width: 200px; }
.right { float: right; width: 300px; }结果是 .container 高度为 0，下面的 - 必须给父容器触发 BFC（比如加
overflow: hidden或display: flow-root） -
left和right元素需明确设置width，否则可能撑满整行导致无法并排 - 两者总宽度 + margin/padding 不能超过父容器宽度，否则
right会被挤到下一行
为什么 overflow: hidden 能撑开父容器
这是最常用也最容易理解的修复方式。overflow: hidden 会让父容器生成一个新的 BFC，BFC 的特性之一就是会包含内部浮动子元素的高度。
注意点：
立即学习“前端免费学习笔记（深入）”；
- 它不是靠“隐藏溢出”起作用，而是靠 BFC 的布局规则；即使没内容溢出，也能生效
- 如果父容器本身需要显示滚动条或下拉菜单，
overflow: hidden会截断内容，此时该换用display: flow-root - IE6/7 不支持
flow-root，老项目仍需zoom: 1（触发 hasLayout）或伪元素清除法
float left 和 float right 同时存在时的排列逻辑
浏览器按 HTML 顺序解析，先遇到的浮动元素优先占据对应侧的空间。但左右浮动之间没有天然“对齐”关系，它们只是各自找最近的可用边界。
典型陷阱：
- 若
.left元素 DOM 位置在.right之后，.right会先贴右，.left再贴左，但若父容器不够宽，.left可能掉到下一行——顺序很重要 - 左右浮动元素的
margin是相对于父容器边界的，不是彼此之间的；想控制间距得用padding或额外 wrapper - 如果中间留白区域需要自适应宽度，不能靠浮动本身实现，得用
margin-left/right手动预留空间（比如.left { width: 200px; float: left; }+.right { width: 300px; float: right; }+.main { margin: 0 300px 0 200px; }）
现代替代方案为什么更推荐避免 float 布局
浮动本意是让文字环绕图片，强行用于页面布局属于 hack。CSS Grid 和 Flexbox 出来后，所有主流浏览器都已原生支持，代码更直观、响应式更可控、嵌套更安全。
比如同样左右分栏：
.container {
display: grid;
grid-template-columns: 200px 1fr 300px;
}
.left { grid-column: 1; }
.main { grid-column: 2; }
.right { grid-column: 3; }
浮动布局在响应式断点、垂直居中、等高列、动态内容高度变化等场景下，容易反复踩坑。除非要兼容 IE9 及以下，否则没必要再用 float 控制整体布局。
真正容易被忽略的是：很多人以为“清除浮动”就万事大吉，却没意识到，一旦加了 JS 动态插入内容、或 CSS 加了 transition/transform，浮动布局的重排行为会变得难以预测。
