float布局现在基本不该用，因其本质仅为图文环绕设计，强行用于多列布局会导致父容器塌陷、元素错位及响应式失效，修复方案均为临时补丁；现代应优先采用flex或grid。
float 布局现在基本不该用
它根本不是为多列布局设计的——只解决「文字环绕图片」这一个场景。硬拿它做三栏、侧边栏+主内容，立刻触发父容器高度塌陷（height: 0）、相邻块级元素被“吸”上去、小屏缩放时换行错乱等问题。修复方式如 ::after + clear: both 或 overflow: hidden 都是补丁，不是解法。IE8 及更早版本才真需要它；2026 年绝大多数项目已无此兼容压力。
inline-block 的间隙问题很实际
它保留在文档流里，不会塌陷，但 HTML 中的换行符和空格会被当作文本节点渲染，产生约 4px 横向间隙——这不是 bug，是规范行为。常见错误现象：.col { display: inline-block; width: 33.33%; } 写三列，第三列掉到第二行。
可用方案有：
• 给父容器设 font-size: 0，子元素再单独设字体大小（注意 <input>、<button></button> 等控件会继承失效）
• 用 margin-left: -4px 抵消（缩放后易失效，不推荐）
• vertical-align: top 必须显式声明，否则默认基线对齐，盒子内没文字时会底部对齐
真正该用的是 flex 或 grid
现代浏览器已全面支持 display: flex 和 display: grid，它们没有塌陷、没有间隙、响应式天然友好。
关键实操点：
• 父容器必须设 display: flex，且多数场景要加 flex-wrap: wrap（否则超宽直接溢出）
• 子项宽度优先用 flex: 1（等分）或 flex: 0 0 33.33%（固定比例），避免混用 width 和 flex 导致 flex-basis 误判
• IE10–11 需加 -ms-flex 前缀，且 flex: 1 在 IE 中要拆成 -ms-flex: 1
什么时候还能考虑 inline-block
仅当两个条件同时满足：
• 目标环境必须支持 IE9+，但又不能用 Flex（比如某些老版 uni-app 或微信小程序基础库）
• 布局极其轻量：按钮组、图标导航、固定宽高的卡片列表，且能统一控制父容器
一旦涉及动态列数、响应式重排、或内容高度不一致，vertical-align 对齐逻辑和间隙处理就会变脆弱。浮动连这点灵活性都没有——它连多行错位都控制不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
