浮动多栏布局

旧 CSS 常用多个浮动块组成侧栏和主栏，再用清除元素恢复父高度。维护时要先理解浮动宽度、清除方向、父元素背景和内容环绕，不能只把每个 float 改成 display: flex。

.column { float: left; width: 30%; }
.main { float: left; width: 70%; }
.clearfix::after { content: ""; display: table; clear: both; }

这些规则可能与固定宽度、负 margin、IE 兼容 hack 和打印样式相互作用。迁移前记录实际 DOM 顺序和窄屏行为；现代替代方案优先使用 Grid 或 Flexbox，但要保留内容顺序、焦点顺序和溢出契约。

实验与练习

用浮动复现两栏旧布局，加入长标题、清除元素和窄视口。再分别用 Flexbox、Grid 重建，比较父高度、顺序、换行和打印结果。写出一条可以单独回滚的迁移步骤。

可运行微实验：先复现旧行为再迁移

为旧页面保留一个基线副本，分别在 quirks mode、table layout、float 多列和现代布局下运行。记录 DOM、尺寸、换行和脚本选择结果，再一次只迁移一个约束；迁移后必须用相同输入比较截图和交互行为。

常见错误

• 只替换 CSS，不检查旧 HTML 的空清除节点。
• 让视觉顺序改变，却没有调整阅读和键盘顺序。
• 以为 clearfix 能解决所有浮动溢出。

继续阅读

存量页面还可能使用已经不推荐的标签，下一篇识别它们：废弃标记识别。

练习

1. 用最小输入复现“浮动多栏布局”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案