必须将中间栏放在html最后，左右栏顺序可互换；中间栏需用margin-left和margin-right精确预留左右栏宽度空间；父容器须设overflow:hidden触发bfc防止高度塌陷。
能用，但必须严格控制HTML顺序和margin计算，否则中间栏会错位或撑满整行。
float实现三栏布局的关键HTML顺序
中间栏 .center 必须放在HTML最后，左右栏顺序可互换，但不能在中间栏之后再插入其他浮动元素。
原因：float 会让左右栏脱离文档流，.center 仍留在流内，靠 margin “让出空间”；如果它写在前面，就会被左右栏覆盖或挤到下一行。
<div class="left"></div><div class="right"></div>-
<div class="center"></div>← 必须是最后一个
margin-left 和 margin-right 必须手动计算
中间栏的 margin-left 和 margin-right 值，等于左右栏各自的宽度（不含 padding/border），否则无法留出正确间隙。
常见错误：margin-left: 200px 却忘了左边栏还有 padding: 10px 或 border: 2px，实际占用 212px，导致中间栏左边缘偏移不足，与左栏重叠。
- 若
.left宽度为200px，且无额外内边距/边框 →margin-left: 200px - 若
.right宽度为150px，含border-right: 1px→ 实际占位 151px，应设margin-right: 151px - 父容器无需
overflow: hidden来清除浮动——那只是防止父容器高度塌陷，不影响三栏并列
响应式缩小时 float 布局会崩溃
当视口宽度小于左右栏宽度之和（比如 200px + 150px = 350px），右栏会被强制换行到底部，破坏三栏结构。
这不是 bug，而是 float 的固有行为：它不保证“始终同行”，只保证“尽可能浮动到指定方向”。没有媒体查询兜底时，用户在小屏上看到的是两行布局。
- 必须加
@media (max-width: 360px)降级处理（例如改为单列） - 不能依赖
min-width强制维持三栏——它只限制容器最小宽度，不阻止子元素换行 - 不要用
white-space: nowrap强撑，会导致横向滚动或内容溢出
父容器高度塌陷必须显式修复
因为左右栏都 float 了，父容器默认高度为 0，中间栏即使设置了 height，也看不见背景色或边框。
最轻量、最稳妥的做法是给父容器设置 overflow: hidden（或 auto），触发 BFC，自动包含浮动子元素。
- 避免用
clear: both的空标签——冗余DOM，语义差 - 避免用
::after伪元素清除浮动——多一层抽象，调试更绕 -
overflow: hidden在现代浏览器中兼容性极好，且不影响布局逻辑
float 方案现在主要用于兼容老项目或教学演示；真实业务中，只要支持 IE11+，优先用 display: flex ——它不用算 margin，不依赖 DOM 顺序，响应式天然友好。但如果你正在维护一个 legacy 系统，记住：顺序、margin、overflow，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
