中间栏塌陷的根本原因是未触发BFC，而非margin错误；应通过overflow: hidden等触发BFC，确保DOM顺序为左、右、中同级，父容器需清除浮动且box-sizing等细节统一。
中间栏塌陷是因为没触发BFC，不是margin写错了
浮动元素脱离文档流，左右栏一float，中间栏就“看不见”它们了。它默认按块级元素渲染，但若没设宽度、又没形成独立格式化上下文（BFC），就会被左右栏“顶上去”，视觉上消失或错位。
关键不是margin-left和margin-right数值对不对，而是中间栏必须获得自己的定位上下文：
- 最轻量做法：给中间栏加
overflow: hidden（或auto），强制触发BFC - 别用
visibility: hidden或opacity: 0替代——它们不触发BFC - IE7及更早需用
zoom: 1（仅IE私有属性）来触发hasLayout - 如果中间栏是空的（比如只含注释或空白字符），在IE8下可能完全不占高度，得加
min-height: 1px兜底
左右浮动必须同级，且中间栏不能浮动
HTML结构顺序必须是左栏、右栏、中间栏（不是语义顺序，是DOM顺序），三者为同一父容器的直系子元素。一旦中间栏也float: left，它就进入浮动流，和其他浮动元素一样受行内空间约束，极易换行。
常见错误现象包括右栏掉到下一行、中间栏被挤窄甚至消失——根本原因就是浮动层级混乱：
- 左栏设
float: left，右栏设float: right，两者必须互不干扰（即不共用同一行内剩余空间） - 中间栏绝对不能设
float，否则它会尝试“找位置”并失败 - 如果左右栏用了
display: inline-block，在IE里容易意外换行，老老实实用float更稳 - 父容器不能有
overflow: hidden以外的溢出裁剪（如overflow: clip），否则可能把中间栏内容截断
margin值必须等于左右栏总占用宽度
margin-left和margin-right不是随便估的，得严格对应左右栏在文档流中“腾出的空间”。这个空间 = 内容宽 + padding + border（如果用了box-sizing: border-box）。
例如左栏width: 200px、padding: 10px、border: 1px solid，那margin-left至少得是222px（200 + 10×2 + 1×2）：
- 左右栏若用
%单位，中间栏margin也得用%，否则响应式时错位 - 慎用
calc()算margin：IE9以下不支持，老项目要降级为JS计算或固定值 - 不要依赖
width: auto让中间栏自适应——它只在BFC+正确margin下才有效；单独写width: auto毫无作用 - 如果左右栏有
box-shadow，它不影响布局尺寸，不用计入margin
父容器必须清除浮动，否则高度塌陷
左右栏浮动后，父容器无法感知它们的高度，导致背景色、边框、后续兄弟元素全部错位。这不是中间栏的问题，是父级容器“失高”。
只在最后加一个clear: both的空div不保险，尤其当父容器有min-height或动画时容易失效：
- 推荐用伪元素清除：
::after { content: ""; display: table; clear: both; } -
overflow: hidden也能顺带清除，但会隐藏溢出内容，慎用于弹窗、下拉等场景 - 避免用
float本身去“撑高”父容器——这会让整个布局陷入嵌套浮动陷阱 - 如果父容器同时是flex或grid容器，浮动清除逻辑可能被覆盖，优先改用现代方案
实际复杂点不在代码行数，而在所有参与元素的盒模型细节必须对齐：box-sizing是否统一、padding和border是否被计入、IE版本是否真需要支持、以及DOM顺序是否被其他JS动态修改过。这些细节漏掉一个，布局就可能在某个设备或内容变化时突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
