float 与 inline-block 不能混用实现混合浮动布局，因 float 使元素脱离文档流并强制 display 为 block，导致 inline-block 的 vertical-align 等特性失效，引发换行、错位、塌陷等问题。
float 和 inline-block 不能混用实现“混合浮动布局”——它们属于互斥的布局机制，强行组合只会导致不可控的换行、对齐错乱或高度塌陷。
为什么 float + inline-block 会出问题
float 让元素脱离文档流，inline-block 则保持在行内格式化上下文中并尊重 whitespace（空格/换行符）。一旦一个元素同时设置 float: left 和 display: inline-block，浏览器会优先执行 float 行为，display: inline-block 实际被忽略（CSS 规范明确：浮动元素的 display 值会被强制重置为 block）。
常见错误现象包括：
- 期望用
inline-block控制垂直对齐（如vertical-align: top），但因 float 生效而失效 - 父容器内既有 float 元素又有
inline-block元素，后者被挤到下一行或位置漂移 - 清除浮动后，
inline-block元素仍受残留空白字符影响，出现意外间隙
真正可用的“混合”场景：float 做主结构，inline-block 仅用于子内容排版
唯一合理结合点是：float 控制大块区域（如侧栏、主区），而其内部某段文字、按钮组等使用 inline-block 排列。此时两者作用域分离，不冲突。
立即学习“前端免费学习笔记（深入）”；
例如侧边导航栏浮动，内部菜单项用 inline-block 水平排列：
.sidebar {
float: left;
width: 200px;
}
.sidebar .nav-item {
display: inline-block;
padding: 8px 12px;
vertical-align: top; /* 此时有效 */
}注意：.sidebar 必须触发 BFC（如加 overflow: hidden），否则内部 inline-block 元素不会影响其高度计算。
替代 float + inline-block 的现代方案
如果你想要的是“既可控宽度又可对齐又不塌陷”的效果，直接放弃 float 更可靠：
- 多列并排 → 用
display: flex，配合flex-wrap和align-items - 图文环绕 → 仍可用
float，但别混inline-block；需要微调对齐就用margin或transform - 按钮组/标签云 →
display: inline-flex或display: flex+flex-wrap: wrap - 兼容老浏览器（IE8+）→ 只用 float +
overflow: hidden清除，彻底避开inline-block的 whitespace 问题
最常被忽略的一点：所谓“混合布局”，本质是试图用两种不同格式化上下文（float 触发浮动上下文，inline-block 属于行内上下文）强行协同——这违背 CSS 渲染原理。真要稳定，就选一种机制贯穿到底。
