现代项目不推荐用 float 实现三栏布局，因其本质是文字环绕而非页面布局，易导致塌陷、错位等问题；仅适用于兼容 ie8 或紧急修复遗留系统 bug。
float 三栏布局为什么在现代项目里基本不推荐
因为 float 的本质是「文字环绕」，不是为页面结构设计的。强行用它做三栏，会触发 BFC、影响后续元素流、清除浮动稍有疏忽就塌陷——这不是技巧问题，是模型错配。
常见错误现象：父容器高度为 0、右侧栏掉到下一行、中间栏被左侧栏遮盖。这些都不是写得不够熟，而是 float 本就不该承担这个职责。
适用场景只剩两种：兼容 IE8 及更老浏览器；或者在遗留系统里修一个紧急样式 bug，且不能动 HTML 结构。
用 float 实现三栏必须做的三件事
不是“加个 float 就完事”，而是三个硬性条件缺一不可：
- 左侧栏和右侧栏必须设固定宽度（或最大宽度），并显式声明
float: left或float: right - 中间栏不能设
float，但必须用margin-left和margin-right预留左右栏空间 - 父容器末尾必须清除浮动，否则高度塌陷——推荐用
::after伪元素，而不是clear: both的空 div
示例关键片段：
.container::after { content: ""; display: table; clear: both; }
.left { float: left; width: 200px; }
.right { float: right; width: 200px; }
.main { margin: 0 200px; }
margin 要怎么算才不踩坑
margin-left 和 margin-right 不是随便填数字。它们必须严格等于左右栏的宽度值，且单位要一致（比如都用 px，别混用 % 和 em）。
容易忽略的点：
- 如果左右栏用了
box-sizing: border-box，而边框/内边距不为 0，那margin得加上这些值，否则中间栏会被挤压 - 响应式断点里改了左右栏宽度，
margin必须同步改，否则自适应失效 - 用
calc()是可行的，比如margin: 0 calc(200px + 1rem)，但 IE9 以下不支持
比 float 更靠谱的替代方案其实就两个
真要写三栏，优先选这两个：
- 用
display: flex：父容器设display: flex，中间栏加flex: 1，左右栏设flex: 0 0 200px，天然自适应、无塌陷、代码少一半 - 用
display: grid：父容器设grid-template-columns: 200px 1fr 200px，三栏直接对齐，连 margin 都不用算
除非你正在维护一个十年前写的后台系统，且老板明确说“不准动 HTML，不准升级 CSS”。否则，花时间调 float 三栏，不如花十分钟换成 flex。
真正难的从来不是怎么让三栏显示出来，而是判断该不该用这个方式——而这个问题，往往在写第一行 CSS 前就得想清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
