根本原因是浮动元素脱离文档流；display: inline-block虽能触发bfc解决塌陷，但会引发行内级布局问题、基线对齐错位、宽度失控等隐性代价，现代推荐用flex、grid或flow-root替代。
浮动元素超出父容器，根本不是“边界没设好”，而是它压根脱离了文档流——display: inline-block 能绕过这个问题，但不等于它是推荐解法。
为什么 display: inline-block 看起来能“解决”溢出
给父容器设 display: inline-block 会触发 BFC（块级格式化上下文），使其重新包含浮动子元素高度，从而避免塌陷。但它同时带来三个隐性代价：
- 父容器会变成行内级盒子，受父级文本对齐、空白符、
font-size影响，容易出现意外间隙或换行 - 它默认有基线对齐行为，若子元素高度不一致，可能造成底部错位
- 无法设置
width: 100%（除非显式设vertical-align: top+ 清除空白符）
display: inline-block 和 float 混用时的典型错误
常见误操作是给父容器设 inline-block，子元素仍用 float ——这反而加剧不可控性：
- 浮动子元素在
inline-block容器中仍脱离文档流，max-width: 100%参照的仍是视口而非父容器 - 父容器宽度若未显式声明（比如只靠内容撑开），
inline-block会收缩包裹，导致图片被强制压缩或拉伸 - 在 Flex/Grid 容器里嵌套
inline-block+float，浮动直接失效，样式逻辑断裂
真要替代浮动，优先选 display: flex 而不是 inline-block
inline-block 是过渡方案，现代布局中它既不语义清晰，也不易维护。真正替代浮动的合理路径是：
- 图文环绕类场景：用
float+shape-outside（标准路径，非 hack） - 左图右文/多栏布局：用
display: flex，float根本不需要 - 卡片、网格等结构化区域：直接上
display: grid - 老项目兼容要求高：用
display: flow-root（Chrome 64+/Firefox 58+），比inline-block更干净
别为了“不用 overflow:hidden”而硬套 inline-block——它只是把问题从视觉错位，转移到对齐失控和响应式失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
