现代开发中不该用float做布局，因其本为文字环绕设计，强行用于多列会导致父容器塌陷、响应式错乱、清除浮动等副作用；inline-block虽不塌陷但有间隙问题；应优先使用flex或grid。
现代开发中，float 不该用于整体页面或模块布局，inline-block 也仅在特定兼容场景下可作为过渡方案；真正该用的是 display: flex 或 display: grid。
为什么 float 布局现在基本不该用
浮动本就不是为多列布局设计的——它最初只解决「文字环绕图片」这个单一问题。强行拿它做三栏、侧边栏+主内容这类结构，立刻触发一堆副作用：
-
float: left后父容器高度塌陷（变成0），必须额外加::after伪元素或触发 BFC 才能修复 - 相邻块级元素被“吸”上去，布局错乱，尤其缩放或小屏时换行失效
- 响应式断点里宽度计算稍有偏差，整个浮动链就崩，调试成本高
- IE8 及更早版本才真需要它；2026 年绝大多数项目已无此兼容压力
inline-block 看似温和，但间隙问题很实际
inline-block 元素仍在文档流中，不会塌陷、无需清除，这点比 float 强。但它把 HTML 中的换行符和空格当文本节点渲染，导致默认约 4px 的横向间隙——这不是 bug，是规范行为。
- 常见错误现象：
.col { display: inline-block; width: 33.33%; }写三列，结果第三列掉到第二行 - 解决方法有几种，但都带代价：
font-size: 0会影响子元素内input、button的字体继承；margin-left: -4px在缩放或不同设备上容易失效；HTML 连写又牺牲可维护性 -
vertical-align能控对齐，但默认按基线对齐，盒子内没文字时会底部对齐，常需显式设vertical-align: top
什么时候还能考虑 inline-block
只有两个条件同时满足时，inline-block 才值得保留：
立即学习“前端免费学习笔记（深入）”；
- 目标环境必须支持 IE9+，但又不能用 Flex（比如某些老版 uni-app 或微信小程序基础库）
- 布局极其轻量，比如按钮组、图标导航、固定宽高的卡片列表，且能统一控制父容器
font-size
一旦涉及动态列数、响应式重排、或内容高度不一致，inline-block 的对齐逻辑和间隙处理就会变脆弱。
清除浮动本身已是过时操作
所谓「清除浮动」，本质是在对抗一个设计初衷就不匹配的机制。你写的 .clearfix::after、overflow: hidden、display: flow-root，全是为了兜住 float 脱离文档流带来的副作用。
- 这些技巧现在只出现在遗留系统维护、面试题或老文档里
- 新项目里写
clear: both，大概率说明你正在用错工具——该换flex了 - 哪怕只是临时改一行样式，也要意识到：清除浮动不是功能，是补丁
真正容易被忽略的，不是怎么清浮动，而是忘了问一句：我为什么非得用 float？
