float仅对块级框生效，inline元素需显式设display:block/inline-block；在flex容器中float被规范强制置为none；伪元素清除浮动必须满足content、display、clear三条件。
子元素没设 display: block，float 就不生效
浮动必须作用于块级框（block-level box）才能脱离文档流；如果子元素是 inline 元素（比如 <span></span>、<a></a>），即使写了 float: left，浏览器也会先把它隐式转成 inline-block 或直接忽略——结果就是“看起来没浮动”。
常见错误场景：
- 在
<p></p>里嵌套<span class="float-right"></span>，但没给.float-right加display: block或display: inline-block - 用 Sass 写了
.item { float: right; }，但该元素默认是inline，且未覆盖显示类型 - HTML 中误用语义化内联标签（如
<em></em>、<strong></strong>）承载布局意图，却没重置 display
验证方法：打开 DevTools → 选中元素 → 切到「Computed」面板 → 搜 display，确认最终值是 block、inline-block 或 table，而不是 inline。
float 在 flex 容器里被静默覆盖为 none
这不是失效，是规范强制清零。只要父容器设置了 display: flex 或 display: inline-flex，它的所有直接子元素都会进入 Flex Formatting Context（FFC），此时 float、clear、vertical-align 全部被标记为 not applicable，计算值恒为 none。
你看到的“划掉”不是优先级问题，是浏览器按规范执行的结果：
- DevTools 的「Styles」面板里
float: right显示删除线，但「Computed」里明确写着float: none - 加
!important也没用——FFC 下这些属性根本不参与样式计算 - 试图用
margin-left: auto替代float: right才是对的解法
父容器触发了 BFC，但子元素 float 还是“没反应”
触发 BFC（比如 overflow: hidden、display: flow-root）本身不会让 float 生效，它只解决父容器高度塌陷；如果子元素根本没浮动成功，BFC 也救不了。
排查顺序必须是：
- 先确认子元素是否满足浮动前提：是块级框 + 没被 FFC/IFC 等上下文压制
- 再检查父容器有没有塌陷（看 height 是否为 0，背景/边框是否包裹不住）
- 最后才决定要不要加
clearfix或改用flow-root
一个典型陷阱：给父容器加了 display: flow-root，以为“这下能清浮了”，结果子元素还是贴着顶部不动——其实是子元素自己没设 display: block，压根就没浮起来。
清除浮动的伪元素没撑开父容器高度
::after 清除浮动失败，90% 是因为漏了三个关键点中的至少一个：
- 没写
content: ""—— 伪元素根本不会生成，DevTools 里都看不到节点 - 没设
display: table或display: block——clear只对块级/表格级元素生效，inline默认值下clear: both形同虚设 - 伪元素被其他样式覆盖，比如父容器有
height: 100px，直接压死了 ::after 的撑高效果
推荐写法：.clearfix::after { content: ""; display: table; clear: both; }。比 block 更稳，因为它天然触发 BFC，且不会继承 line-height 导致意外撑高。
真正容易被忽略的是：清除动作只对「当前父容器内部的浮动流」起作用。如果你把 .clearfix 加在祖父级上，而浮动子元素在中间某层没设清除类，那它照样塌陷——浮动影响不会跨层级传递，也不会自动向上冒泡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
