float实现多栏自适应的核心是脱离文档流+非浮动元素避让，右栏需触发bfc（如overflow:hidden）才能绕开左栏，否则会顶部渲染或掉行；父容器高度塌陷须用::after清除浮动；三栏等宽需box-sizing:border-box、width:33.333%、正确dom顺序。
float 实现多栏自适应流式排版，核心不是“自动计算宽度”，而是靠浮动脱离文档流 + 非浮动元素主动避让（或手动留空）来达成视觉并列。现代项目中它已非首选，但若需兼容旧环境、或嵌入遗留系统，仍得写对——错一个条件，布局就塌、错位、重叠。
为什么 float: left 后右栏没靠上来？
常见现象：左栏加了 float: left 和 width: 200px，右栏还是从顶部开始渲染，文字被左栏遮住，甚至整块挤到下一行。
根本原因：右栏没触发避让逻辑。它默认是 overflow: visible，不生成 BFC，也不理解“左边有个浮动块”，只按普通流排布。
- ✅ 正确做法：右栏加
overflow: hidden（IE8+）或display: flow-root（现代浏览器），强制生成 BFC，自动绕开浮动区域 - ❌ 错误做法：只加
margin-left: 200px却不触发 BFC → 右栏内容可能被遮盖，且在窄屏下易换行 - ⚠️ 注意：
overflow: auto也能触发 BFC，但内容略超宽时会意外出现横向滚动条
父容器高度塌陷怎么破？
当所有子元素都 float，父容器会“看不见”它们，height 坍缩为 0，背景、边框、后续元素全乱套。
- ✅ 推荐方案：
.container::after { content: ""; display: table; clear: both; }—— 兼容性好，无副作用 - ✅ 替代方案：
.container { overflow: hidden; }—— 简洁，但若子元素真要溢出（如 tooltip、下拉菜单），会被截断 - ⚠️ IE6–7 兼容需加：
zoom: 1（触发 hasLayout），但仅限必须支持的场景
三栏等宽自适应怎么写才稳？
目标：三栏并排，宽度均分，随容器缩放，不换行。关键在总宽度控制和盒模型。
- 必须设
box-sizing: border-box，否则padding或border会让实际宽度超 100% - 每栏用
float: left+width: 33.333%，不能写成33%（累积误差导致第三栏掉行） - 清除浮动必须加在父容器上，不能只清最后一栏
- 移动端慎用：小屏下建议用媒体查询改
width: 100%+float: none，否则三栏挤成窄条
真正容易被忽略的，是 HTML 结构顺序：left 必须写在 right 前面；三栏也得按左→中→右顺序写。DOM 渲染顺序决定浮动堆叠逻辑，颠倒了，第一栏就直接掉到第二行——这个坑调试时几乎看不到 CSS 错误，纯靠经验排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
