浮动布局列对不齐是因float机制不支持列高同步、行内对齐和整行换行；必须用flex或grid替代，老项目可临时用padding/margin补偿+伪元素清除浮动。
浮动布局列对不齐不是样式没写全，而是 float 机制本身不提供列高同步、行内对齐或换行控制能力；必须用 display: flex 或 display: grid 替代，老项目可临时用 padding-bottom/margin-bottom 补偿 + ::after 清除浮动。
为什么 float 多列高度不一致就错位
浮动元素脱离文档流，父容器无法感知子项真实高度，导致：矮列右侧留白，后续浮动项“上浮”钻进空隙；不同列底部基线（baseline）因 line-height、font-size、padding 差异而错开；换行点由单个元素宽度决定，不按“整行”计算。
-
box-sizing: border-box必须全局加，否则width: 25%+padding: 8px实际超宽 - 所有浮动项显式设
width，别依赖内容撑开；4 列推荐width: calc(25% - 8px)（含左右间距） - HTML 中浮动元素之间不能有换行或空格，否则渲染器插入约 4px 间隙
- 父容器必须触发 BFC：
display: flow-root最稳妥；::after { content: ""; display: table; clear: both; }是兼容方案
用 flex 实现真正等高与自动换行
display: flex 不仅解决错位，还让列高自动拉齐、换行逻辑可控、响应式更自然。它不依赖清除浮动，也不受基线干扰。
- 父容器加
display: flex和flex-wrap: wrap，子项自动按行排列 - 子项设
flex: 1 1 300px（不伸展、不收缩、最小 300px），避免窄屏下挤成一列 - 用
gap: 16px控制列/行间距；IE11 不支持gap，改用margin-right+:not(:last-child) - 避免在 flex 容器里混用
float—— DevTools 的 Computed 面板里若display不是flex，说明被全局* { float: left }覆盖了
老项目无法弃用 float 时的补偿方案
仅限 IE7+ 兼容场景，且必须配合清除浮动生效。这不是“修对齐”，而是用视觉欺骗模拟等高。
立即学习“前端免费学习笔记（深入）”；
- 所有浮动列统一加：
padding-bottom: 9999px; margin-bottom: -9999px; - 数值必须为整数 px，禁用
em/rem，否则缩放时失效 - 伪元素清除必须作用于**直接父容器**：
.columns::after { content: ""; display: table; clear: both; } - 若需“至少等高”，再加
min-height: 200px锚定底线；但内容超长仍会撑开，此时已非“等高”而是“基础高度一致”
真正难处理的是那些混用 float、position: absolute 和 JS 动态插入的旧系统——补丁越打越多，最后发现 flex 迁移成本远低于持续 debug。
