float三栏布局中间块塌陷的根本原因是其未触发BFC且脱离正常流，需用overflow:hidden等创建BFC并设左右margin≥浮动元素总宽，同时父容器清除浮动；现代项目应优先使用flex布局。
float左右固定+中间margin为什么经常塌陷
因为浮动元素脱离文档流，中间块如果没设宽度又没触发BFC，会直接被左右浮动块“挤上去”，看起来像消失或错位。关键不是margin写没写对，而是中间块根本没获得独立的定位上下文。
- 左右
float: left和float: right必须加在同级元素上，且中间块不能浮动 - 中间块必须设置
margin-left和margin-right，值要≥左右块的宽度（含padding/border） - 父容器需清除浮动，否则高度塌陷——用
overflow: hidden或伪元素::after都行，但别只靠clear: both放最后，那不保险
中间块怎么写才能真正自适应
不能只靠width: auto，得配合margin撑开空间，同时确保它不被浮动覆盖。最稳的方式是让中间块形成BFC，这样它会自动避开浮动区域。
- 给中间块加
overflow: hidden（或auto、visible以外的值），这是最轻量的BFC触发方式 -
margin-left设为左栏总宽（比如200px），margin-right设为右栏总宽（比如150px） - 不要给中间块设
width，否则在窄屏下可能溢出；让它自然收缩到剩余空间 - 如果左右栏用
px定宽，中间就能完美自适应；若左右用%，中间margin就得用%同步，否则响应式时会错位
IE8及以下兼容float三栏的真实限制
IE8支持float和margin，但有个坑：如果中间块没有内容或只有空格，它可能完全不占高度——不是bug，是IE对“空块+margin”的渲染逻辑特殊。
- 必须确保中间块有至少一个非空文本节点，或加
min-height: 1px - IE7及更早不支持
overflow: hidden触发BFC，得用zoom: 1（仅IE）来hasLayout - 左右浮动块若用了
display: inline-block，在IE里可能换行，老老实实用float更稳 - 别依赖
calc()算margin，IE9才开始支持，老项目慎用
现代项目还该用float三栏吗
除非要兼容IE8，否则没必要。Flexbox一行代码就能替代整套float+margin+BFC逻辑，而且语义清晰、响应式友好。
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex父容器，flex: 0 0 200px左栏，flex: 1中栏，flex: 0 0 150px右栏，完事 - float方案在resize或动态增删内容时容易重排异常，flex天然稳定
- 如果必须用float（比如维护老系统），记住：塌陷不是margin没设对，是中间块没BFC；BFC不是可选项，是必选项
float三栏真正的复杂点不在写法，而在于所有参与元素的盒模型细节都要对齐——border、padding、box-sizing，差1px都可能让margin计算失效。
