父容器高度塌陷需用 clearfix 清除浮动，三列等宽应使用 calc(100%/3) 配合 box-sizing: border-box，右侧自适应栏宜用 BFC 而非 margin-left。
父容器高度塌陷必须先解决
三列布局用 float 时，只要三个子元素都加了 float: left 或 float: right，父容器高度大概率变成 0——背景色消失、边框缩成线、页脚直接叠在内容上。这不是 bug，是 CSS 规范行为：浮动元素脱离文档流，父容器“看不见”它们。
不处理这个，其他样式全白搭。常见错误是只写 float 就以为完事，结果布局当场错位。
-
overflow: hidden能触发 BFC 包含浮动，但会意外裁剪溢出内容（比如下拉菜单、tooltip） -
zoom: 1是 IE6–7 的 hack，现代项目不用管 - 最稳妥的是给父容器加
class="clearfix"，再配标准伪元素清除规则
.clearfix::after 必须写的三项属性
很多教程抄的 .clearfix::after 片段缺关键项，尤其在嵌套浮动或 IE8 下失效。真正生效的写法只有这三项不能少：
-
content: ""—— 必须是空字符串，写成" "会多一个空白字符，导致换行 -
display: table—— 不能换成block或inline-block，否则 IE8 下清除失败 -
clear: both—— 这才是清除动作的核心
完整写法：
.clearfix::after { content: ""; display: table; clear: both; }记住：只写 CSS 不给父元素加 class="clearfix"，等于没写。
立即学习“前端免费学习笔记（深入）”；
三列等宽时 width 别硬写 33.33%
写 width: 33.33% 看似合理，但小数像素在不同屏幕缩放或 DPI 下四舍五入，第三栏常被挤到下一行。这不是你代码写错，是渲染精度问题。
- 优先用
width: calc(100% / 3)，计算更精确，IE9+ 支持 - 必须配合
box-sizing: border-box，否则 padding/border 会撑出容器 - 列间距别用
margin-right（最后一栏会多出空白），改用左右padding，并从 width 中扣除，例如width: calc(100% / 3 - 20px)（对应左右各 10px padding）
右侧自适应栏不能只靠 margin-left
两栏或三栏中，常见错误是给中间或右侧栏写 margin-left: 200px 来避开左侧定宽栏。短期能跑，但一动就崩：
- 左侧栏响应式变窄时，右侧 margin 不同步改，就会留白或重叠
- 如果左侧栏有 hover 变宽、动画展开等交互，
margin-left完全无法响应 - 真正可靠的解法是：左侧
float: left，右侧/中间栏不浮动，用overflow: hidden或display: flow-root触发 BFC 自动填满剩余空间
浮动布局里，“撑开”靠的是 BFC 容器的自动包裹能力，不是靠手动算 margin。这点容易被忽略，但恰恰是稳定性的分水岭。
