CSS浮动三栏布局为什么会出现中间栏下沉

中间栏下沉是因浮动导致脱离文档流而无法感知左右栏位置，正确解法是用overflow: hidden触发BFC或改用flex/grid布局。

中间栏下沉是因为脱离文档流后“看不见”左右栏

浮动元素会脱离标准文档流，左栏float: left、右栏float: right后，它们不再占据空间，中间栏在计算自身位置时，完全感知不到两边已占位——它就当自己是第一个块级元素，从顶部开始渲染，结果被左右栏“挤”到下一行。

这通常不是异常，是 float 的设计行为。常见现象包括：中间栏掉到下方、三栏错位、父容器高度塌陷连带背景/边框消失。

1. 中间栏没设width，靠内容撑开 → 宽度不定，极易被挤走
2. 中间栏没触发 BFC（如没设overflow: hidden）→ 无法自动包裹浮动影响
3. 左右栏用了margin或border但没用box-sizing: border-box → 实际宽度超限，间接导致换行

给中间栏加overflow: hidden就能救回来

这是最轻量、兼容性最好的兜底方案：它不改变布局逻辑，只是让中间栏自己形成一个 BFC 容器，从而“看见”并包裹两侧浮动元素，自然获得正确位置和宽度。

注意：overflow: hidden不是“清除浮动”，而是通过触发 BFC 让中间栏重新参与布局计算。它比加clear: both更直接——后者只对后续元素生效，解决不了当前栏定位问题。

1. 写法示例：.middle { overflow: hidden; }
2. 如果中间栏里有position: absolute的下拉菜单或 tooltip，overflow: hidden可能裁剪溢出内容，此时改用display: flow-root更安全
3. IE11 不支持flow-root，需降级为overflow: auto或坚持用overflow: hidden

calc()算中间栏宽度时漏减右栏宽度

左右栏都固定宽 200px，中间栏写width: calc(100% - 200px)？错。这只会减掉左栏，右栏还在那儿占位，中间栏实际可用空间是100% - 左栏宽 - 右栏宽，漏减就会超限下沉。

单位必须一致：不能calc(100% - 200px - 2rem)混用，浏览器解析失败后回退为auto，又回到“无宽度可依”的原始状态。

1. 正确写法：width: calc(100% - 200px - 200px); 或 width: calc(100% - 400px);
2. 如果左右栏含padding/border，且没设box-sizing: border-box，要额外把这部分也减进去
3. IE11 对calc()在flex-basis中支持极差，三栏用 flex 布局时别在flex-basis里写 calc

现代项目该不该继续用 float 做三栏

该场景已明显过时：float 本意是图文环绕，不是结构布局。三栏这种强结构性需求，用display: flex或display: grid能天然规避所有下沉、塌陷、宽度计算问题。

真正容易被忽略的是——很多“修复 float 下沉”的技巧（比如 clearfix、overflow hack），本质是在对抗 float 的副作用；而 flex/grid 是从源头绕开了这个问题。如果你还在调calc和overflow来保三栏，大概率说明布局方案选错了。

唯一值得保留 float 的地方，是需要文字自动环绕浮动图片的正文排版。其他一切栅格、导航、卡片列表，请直接切 flex。