三栏浮动后父容器高度必然塌陷为0，因浏览器跳过浮动元素高度计算；可用伪元素清除法（需content、display:block、作用于父容器）、overflow:hidden（触发BFC但裁剪溢出）或优先采用flex/grid布局。
为什么三栏浮动后父容器高度变成0
只要三栏都用了 float: left 或 float: right，父容器高度塌陷就不是“偶尔发生”，而是必然结果。浏览器渲染时直接跳过所有浮动子元素的高度计算，父容器就像没它们一样，height 值在开发者工具的 Computed 面板里基本就是 0px。常见连带现象包括：背景色不显示、边框看不见、后续区块（比如页脚）直接顶上来盖住三栏区域。
伪元素清除法必须写对这三点
复制网上 .clearfix 代码却无效？大概率栽在这三个细节上：
-
::after伪元素必须加content: ""，缺了它整个规则被忽略 - 必须是
display: block（不能用inline或没写），否则clear: both不生效 - 选择器要作用在父容器上，比如三栏外层
div加class="clearfix"，而不是套在某个子栏里
正确写法示例：
.clearfix::after { content: ""; display: block; clear: both; }
overflow: hidden 看似简单但容易埋雷
给父容器加 overflow: hidden 能立刻撑开高度，但它不是“清除浮动”，只是触发 BFC 包裹住浮动子元素。副作用很实在：
立即学习“前端免费学习笔记（深入）”；
- 所有溢出内容会被裁剪——比如子元素用了
transform: translateX(20px)或position: absolute向右偏移，直接消失 - 如果父容器本该滚动（如横向三栏卡片列表），
overflow: hidden会让滚动失效 - 在旧版 Safari（iOS 12 及更早）中，BFC 触发不稳定，建议 fallback 写成
overflow: auto
现代项目优先用 flex 或 grid 替代 float
三栏布局本身不需要浮动。用 display: flex 或 display: grid 不仅避免脱离文档流问题，还能天然解决对齐、等高、响应式换行等老痛点：
-
flex：父容器设display: flex，三栏自动同行，flex: 1可均分宽度，align-items: stretch默认等高 -
grid：grid-template-columns: 1fr 2fr 1fr直接定义比例，gap控制间距，完全无视浮动那套逻辑 - 兼容性已无顾虑：Flex 支持到 IE10+（需加前缀），Grid 支持到 Chrome 57+/Firefox 52+/Safari 10.1+
真正需要 float 的场景只剩图文环绕或极老系统维护——其他情况硬用 float，等于主动给自己加清除浮动的负担。
