这是典型的「浮动塌陷」引发的布局错位，根本原因是父容器高度塌陷为0，后续元素从塌陷底部开始排列；clear应加在浮动元素之后的兄弟块级元素上，而非浮动元素自身或父容器；推荐用display: flow-root让父容器形成BFC治本。
浮动元素后面的内容被顶到下一行，但留出巨大空白
这是典型的「浮动塌陷」引发的布局错位，不是 margin 或 padding 导致的视觉误差。根本原因是父容器没有包裹住浮动子元素，高度塌陷为 0，后续兄弟元素按正常文档流从“塌陷后的零高度底部”开始排列，看起来就像中间空了一大截。
clear 应该加在谁身上？不是浮动元素，而是它后面的兄弟块级元素
clear 的作用是“避开前面的浮动”，它本身不修复父容器塌陷，只控制当前元素的定位起点。常见错误是把 clear: both 加在浮动元素自己身上（无效），或加在父容器上（语法合法但无意义）。
- ✅ 正确：加在浮动元素之后、需要“回到正常流底部”的那个块级元素上，比如
<div class="content">或<footer> - ❌ 错误：
.float-box { float: left; clear: both; }——clear对已浮动的元素不起定位作用 - ❌ 错误：
.parent { clear: both; }—— 父容器没参与浮动流，clear不触发重排
更可靠的解法：用 BFC 包裹浮动子元素
比起依赖 clear，让父容器主动形成 BFC（块级格式化上下文）才是治本之策。以下任一方式都能让父容器正确计算高度：
-
overflow: hidden（最常用，但注意会裁剪溢出内容） -
display: flow-root（现代标准写法，推荐，无副作用） -
float: left或position: absolute（改变父容器自身定位，通常不适用）
.parent {
display: flow-root; /* 推荐：安全、语义清晰、不影响子元素 */
}检查 HTML 结构是否意外插入了空标签或换行符
有时候看似“空白”，其实是 <br>、空 <p></p>、或者模板引擎渲染出的空白文本节点撑开的。浮动后紧跟一个空行，在某些浏览器中会被解析为一个空的匿名 inline box，再配合 line-height 就可能产生意外高度。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具选中空白区域，看实际命中的是哪个节点
- 检查浮动元素后是否有未预期的
<div>、<p>或注释节点 - 临时给所有块级元素加
outline: 1px solid red快速定位真实占位范围
浮动塌陷问题表面看是 clear 没用对，实际常卡在「以为 clear 能收容浮动，其实它只管定位」这个认知偏差上。真正要盯住的，是父容器有没有形成 BFC，以及后续元素是否真的需要 clear——有些场景下，直接给下一个块设 margin-top 反而更可控。
