浮动左右分栏需用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; }

• 必须给父容器触发 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，浮动布局的重排行为会变得难以预测。