float与inline-block混用必然导致父容器高度塌陷和子元素错位，因浮动脱离文档流而inline-block不触发bfc；应优先用display:flow-root，兼容ie11则用伪元素clearfix。
float 和 inline-block 共存时父容器高度塌陷
浮动元素脱离文档流，inline-block 元素虽在文档流中但不触发 BFC，两者混用时父容器极易高度塌陷——背景色消失、边框收缩、后续元素上移。这不是兼容性问题，而是布局机制冲突的必然结果。
常见错误写法：.parent { } .child-float { float: left; } .child-ib { display: inline-block; }，此时 .parent 高度只按 inline-block 子项内容计算，完全忽略浮动子项。
- 别依赖
overflow: hidden：它虽能触发 BFC，但会裁剪position: absolute下拉菜单、阴影或 tooltip - 优先用
display: flow-root：一行解决，无副作用，Chrome 64+/Firefox 61+/Safari 15.4+ 均支持 - 若需兼容 IE11，改用伪元素 clearfix：
.parent::after { content: ""; display: table; clear: both; }
行内块元素被浮动元素“挤偏”或错位换行
inline-block 元素默认按基线（baseline）对齐，而浮动元素脱离文档流后，其垂直位置不受父容器 line-height 约束。当两者并排出现时，inline-block 容易因浮动元素高度不一致、行高计算偏差或空白符干扰而错位、掉行甚至重叠。
典型现象：左浮图片 + 右侧 display: inline-block 标题，标题文字下移、与图片底部不对齐；或两个 inline-block 按钮中间突然空出一格，实际是浮动元素占位导致换行。
- 统一垂直对齐：
vertical-align: top或middle，避免 baseline 依赖 - 清除浮动影响范围：给
inline-block容器自身设display: flow-root或overflow: hidden（仅当无溢出内容时） - 检查 HTML 中换行/空格：
inline-block间的空白符会被渲染为一个空格，宽度受font-size影响，可设font-size: 0父容器再重置子项字体
float 与 inline-block 在 flex 容器中同时声明等于白写
在 display: flex 的父容器里，子元素即使同时写了 float: left 和 display: inline-block，浏览器也会静默忽略 float，且 inline-block 的宽高、对齐行为可能被 flex 主轴规则覆盖——最终布局只由 justify-content、align-items 等控制。
DevTools 的 computed 样式中，float 会显示为 not applicable，但开发者常误以为它还在起作用，导致调试绕远路。
- 删掉所有
float声明：flex 容器内不需要它 - 用
margin-left: auto实现右对齐，比float: right更可靠 - 若需图文环绕等 float 特有行为，应把该部分抽离到独立非-flex 区域，避免混用上下文
文字环绕失控 + inline-block 内容错位叠加
浮动元素会让后续行内内容自动绕排，但 inline-block 是块级渲染单元，一旦它紧跟浮动元素之后，又没形成 BFC，就可能出现文字从浮动块底部开始绕、而 inline-block 自身却被“顶上去”覆盖在浮动块之上的混乱效果。
比如左浮头像 + inline-block 用户信息卡片，卡片没撑开高度，文字直接叠在头像右侧，第二行又从头像底部继续绕——视觉上像两层内容打架。
- 给
inline-block卡片加clear: both：确保它避开所有浮动 - 更稳妥做法：卡片容器设
display: flow-root，既清除浮动又保持内部布局自由 - 避免对
inline-block元素设float：它本就不需要浮动来同行排列，加了反而引入不可控行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
