中间栏掉到下一行的根本原因是父容器未形成BFC，导致无法包裹浮动子元素高度而发生布局塌陷；应通过overflow:hidden、display:flow-root等触发BFC，或改用flex/grid布局替代float。
中间栏掉到下一行？先确认是否触发了BFC
float布局中中间内容“被遮挡”，多数情况其实是它直接掉到了左右浮动栏下方，视觉上像被盖住——根本原因是父容器没形成BFC，无法感知浮动子元素高度，导致中间栏按正常流从顶部开始渲染，撞上浮动区域。这不是z-index或层级问题，是布局塌陷。
- 检查父容器是否设置了
overflow: hidden、overflow: auto或display: flow-root；没设就等于没包裹浮动，必塌陷 -
overflow: visible（默认值）不触发BFC，加了也白加 - 若用
display: flex或display: grid作父容器，浮动子元素的float属性会被忽略，此时中间栏不会掉行，但也不会按float逻辑排列——这是预期行为，不是bug
中间栏宽度没算准？calc()里漏减了边框/内边距
用width: calc(100% - 200px - 200px)给中间栏设宽时，如果左右栏实际占宽超过200px（比如含border: 1px或padding: 8px），中间栏就会溢出并被父容器overflow: hidden裁掉，看起来像“被遮挡”。
- 务必把左右栏的
box-sizing设为border-box，再统一用width包含所有尺寸 - 更稳妥的做法：给中间栏加
overflow: hidden（触发BFC），它会自动收缩避让浮动，无需手动计算宽度 - 避免在中间栏上用
margin-left/margin-right模拟留白——浮动不参与外边距合并，且响应式下极易错位
用了clearfix但还是遮挡？伪元素没生效或位置错了
常见错误是把.clearfix::after加在中间栏自己身上，而不是包裹左右浮动栏的**父容器**上。伪元素清除的是“前面”的浮动，对自身后面的兄弟元素无效。
- 确保
.clearfix类应用在浮动子元素的**直接父容器**上，例如<div class="clearfix"><div class="left"></div><div class="right"></div></div> - 伪元素必须有
content: ""和clear: both，仅display: table不够 - 若父容器已是
display: flex或display: grid，::after的clear完全不起作用——flex/grid子项不遵循float清除规则
现代项目还该用float做三栏吗？
不该。float本就不是为页面主布局设计的，它只是图文环绕的遗留方案。现在display: flex能天然解决等高、自适应、避让问题，且无需BFC、无裁剪风险、响应式更可控。
立即学习“前端免费学习笔记（深入）”；
- 左栏：
flex: 0 0 200px，右栏同理；中间栏：flex: 1，自动填满剩余空间 - 若需兼容IE11，避免在
flex-basis里用calc()，改用固定值或JS降级 - 真正容易被忽略的是：很多所谓“修复遮挡”的调试，其实是在给一个本不该存在的布局模式打补丁。当你还在写
float: left配overflow: hidden时，问题不在CSS写法，而在选型本身。
