浮动元素下方的“空白”实为父容器高度塌陷所致，因浮动元素脱离文档流，父容器无法感知其高度；可用clear清除浮动、overflow触发bfc或直接改用flex/grid布局解决。
浮动元素下方为什么会出现空白
这不是“空白”，而是父容器高度塌陷导致的视觉错觉。当子元素设置了 float: left 或 float: right，它会脱离文档流，父容器无法感知其高度，于是高度变为 0 —— 后面的兄弟元素自然就“上浮”到父容器顶部（或前一个非浮动块的底部），看起来像在浮动元素下方留了空白。
用 clear 解决：适合单个清除场景
clear 本身不修复父容器塌陷，而是让某个元素“避开”浮动区域。常见做法是在浮动元素后插入一个空元素并设置 clear: both：
<div class="container"> <div class="float-box"></div> <div class="clearfix"></div> </div>
.clearfix { clear: both; height: 0; overflow: hidden; }
- 必须放在所有浮动子元素的后面，否则无效
- 仅对当前元素生效，不影响父容器高度计算
- 如果父容器本身有边框/背景色，这个方法不能让它包裹住浮动子元素
用 overflow 解决：触发 BFC 是关键
给父容器设置 overflow: hidden、overflow: auto 或 overflow: scroll，本质是触发了 BFC（块级格式化上下文），BFC 容器会包含内部浮动元素的高度。
立即学习“前端免费学习笔记（深入）”；
.container { overflow: hidden; }
- 推荐优先使用
overflow: hidden，语义清晰且无滚动副作用 - 慎用
overflow: auto：在内容溢出时可能意外出现滚动条 - 不要设
overflow: visible（默认值），它不触发 BFC - 如果父容器需要绝对定位子元素或
transform，注意某些旧版浏览器中 BFC 触发方式可能影响层叠上下文
更现代的替代方案：flex 或 grid
浮动本就不是为布局设计的，纯靠它做多列布局容易踩坑。现在主流做法是直接换掉浮动：
.container { display: flex; } 或 .container { display: grid; grid-template-columns: 1fr 1fr; }
- flex/grid 下子元素默认不脱离文档流，父容器高度自动撑开
- 无需额外清理，没有塌陷问题
- 响应式控制更直观，比如
flex-wrap替代浮动换行逻辑 - 兼容性已足够好（IE10+ 支持 flex，IE11+ 支持 grid）
真正难的不是选 clear 还是 overflow，而是意识到：只要还在用 float 做整体布局，就注定要反复处理塌陷、清除、清除再清除的问题。
