浮动元素彻底脱离文档流，不占垂直空间，导致后续块级元素上移、行内内容绕排，父容器高度塌陷；clear:both作用于后续块级元素以避开浮动，而非修复浮动本身。
浮动元素根本不占文档流位置
设置 float: left 或 float: right 后，该元素会立即从普通文档流中完全移除——不是“部分脱离”，而是彻底不参与文档流的尺寸计算和位置分配。
这意味着：
- 它原本在文档流中占据的垂直空间（比如高度、行高、margin 占位）直接消失；
- 后续的块级兄弟元素（如
<div>）会无视它，直接上移，填补它留下的空白； <li>后续的行内内容（如文字、<code><span></span>）则会“感知”到它的物理存在，并绕行排布。 - 给父容器加
border: 1px solid red，你会发现边框紧贴顶部，中间空空如也； - 用浏览器开发者工具检查父容器的 computed height，大概率是
0； - 在父容器末尾加一个未浮动的
<p>test</p>，高度立刻恢复（因为这个<p></p>重新撑开了流）。 -
.box1高80px，左浮动后停在容器顶部； -
.box2高50px，左浮动后也停在顶部，紧贴.box1右侧； -
.box3高60px，若右侧剩余宽度不够，它不会“跳到.box1下方”，而是先整体下移，直到找到能容纳自身宽度的一行，再从最左侧开始排布——但它的顶边仍不能高于.box1的顶边。 - 给浮动子元素自己加
clear：无效，因为清除只对块级定位生效，且需在文档流中才有意义； - 在父容器上加
clear：没用，父容器本身不在流中（除非它自己也是块级且未浮动）； - 正确做法是，在浮动元素之后、需要恢复正常流布局的那个元素上设置
clear: both，或者用伪元素::after在父容器末尾生成一个清除节点。
这种“对块级元素隐身、对行内元素显形”的行为，是理解浮动布局混乱根源的关键。很多人误以为浮动只是“往左/右挪一点”，其实它是把元素从流里整个拎出来，再叠在流上方。
父容器高度塌陷就是最直接的证据
当一个 <div> 仅包含若干 <code>float: left 的子元素时，父容器高度往往变成 0px——这不是 bug，而是标准行为：因为所有子元素都已脱离文档流，父容器“看不见”它们的高度，自然无法撑开。
验证方式很简单：
这个现象不是“需要修复的问题”，而是浮动机制的必然结果。强行用 height: auto 或 min-height 硬撑，反而掩盖了布局逻辑缺陷。
浮动元素的排列受“顶边约束”严格限制
多个左浮动元素不会无序堆叠，而是遵循一条硬规则：当前浮动元素的顶边不能高于前一个浮动元素的顶边。这决定了它们的视觉排列不是“自由漂浮”，而是有层次的“阶梯式左对齐”。
例如：
这条规则常被忽略，导致调试时误判为“浮动失效”或“CSS 写错了”。实际是布局空间和顶边对齐共同作用的结果。
清除浮动不是为了“让元素回到流里”，而是为了阻断影响
clear: both 的作用对象从来不是浮动元素本身，而是应用它的那个元素——它告诉浏览器：“我这个元素的顶边，必须落在所有前面浮动元素的底边之下”。
常见误用：
真正难处理的，是嵌套浮动+响应式场景下，不同屏幕宽度导致浮动换行位置变化，进而使 clear 失效。这时候靠纯 CSS 浮动已不可靠，该考虑 display: flex 或 display: grid 替代方案。
