浮动元素错位根因是父容器未触发BFC致高度塌陷；应优先用display: flow-root，次选clearfix伪元素或overflow:hidden（慎防裁剪）；clear须加在后续兄弟块元素上，现代布局推荐Flex/Grid替代float。
浮动元素“消失”或错位，先看父容器是否形成BFC
浮动元素没塌陷但布局异常，大概率是父容器没触发BFC——它无法包含浮动子项，导致高度为0、背景不显示、后续margin悬空。这不是浮动写错了，而是父容器“看不见”子项。
打开浏览器开发者工具，选中浮动元素的直接父容器，在 Computed 面板里搜 display 和 overflow：如果 display 是 block 且 overflow 是 visible（默认值），那它就没形成BFC，就是根因。
- ✅ 看到
display: flow-root或overflow: hidden/auto→ BFC已触发，问题在别处 - ❌ 只看到
display: block+overflow: visible→ 必须加BFC，否则所有浮动相关表现都不可靠 - ⚠️ 若父容器是
display: flex或display: grid，float属性本身已被忽略，审查时float的 computed 值会显示为none
检查浮动元素自身是否被意外覆盖或脱离流
有时候元素“还在”，但点不动、文字不环绕、margin没反应——不是浮动失效，是它被其他层遮住了，或者根本没进文档流。
在 Elements 面板里右键浮动元素 → Scroll into view，再看它是否真出现在视口内；接着在 Computed 面板查 position、z-index、pointer-events：
立即学习“前端免费学习笔记（深入）”；
-
position: absolute或fixed且没设top/left→ 它可能叠在别的元素上，或跑到视口外 -
z-index值低，又被父级transform或opacity < 1创建了新层叠上下文 → 它被压在下面 -
pointer-events: none出现在祖先节点 → 整个区域都不响应点击，a标签自然失效
用审查工具验证 clear 是否作用在正确位置
clear 不是加给浮动元素自己的，它只对“紧跟其后的块级兄弟元素”生效。很多人把 clear: both 写在浮动项内部，结果毫无作用。
在 Elements 面板里确认三点：
- 浮动元素后面是否有**紧邻的、非浮动的块级元素**（比如
<p>、<div>）？没有就无处可清 - 那个兄弟元素的
Computed样式里，clear值是否为both或left/right？不是说明样式没生效或被覆盖 - 该元素是否被设为
display: inline或inline-block？clear对非块级元素无效
如果结构里找不到合适位置放 clear，别硬塞空 <div class="clear"></div>，直接给父容器加 display: flow-root 更干净。
浮动换行异常？重点看 computed width 和父容器 display
两个 float: left 元素死活不并排，不是 float 失效，是它们加起来“没地方放”。浏览器按 border-box width（含 padding + border + margin）判断是否换行。
在 Computed 面板里展开浮动元素，对比两项：
-
width（你写的值） vsborder-box width（实际占宽）→ 差值来自 padding/border/margin - 父容器的
display是否为flex或grid？是的话，float被无视，它按 flex 主轴排列，和换行无关 - 父容器
overflow是否为hidden？有可能把溢出部分裁掉，看起来像“卡住不换行”
真正想控制多列折行，float 是错误工具。此时 flex-wrap: wrap 或 grid-template-columns 才是对应解法。
