浮动导致父容器高度塌陷，因子元素脱离文档流且父容器未形成BFC；可用clear:both（加空标签）、overflow:hidden（有裁剪风险）或display:flow-root（现代最佳方案）解决。
浮动元素导致父容器高度塌陷，下方出现空白
这是浮动（float）最典型的副作用：子元素浮动后脱离文档流，父容器无法感知其高度，于是高度变为 0，看起来就像“下方突然多了一块空白”。实际不是空白，而是父容器没包住子元素，后续内容自然掉到浮动元素的底部位置去了。
- 常见现象：
div包着几个float: left的img或section，下面的footer紧贴着顶部、或错位到浮动块右侧 - 本质原因：父容器没有形成新的 BFC（块级格式化上下文），且内部无非浮动内容撑高
- 注意：这个“空白”往往不是
margin或padding，调试时用浏览器开发者工具悬停会发现父容器高度确实是 0
用 clear: both 清除浮动（需额外 DOM 节点）
在浮动元素末尾插入一个带 clear: both 的空元素（如 ），能强制它下移到所有浮动元素下方，从而撑开父容器。
A B
- 优点：语义明确，
兼容性极好（IE6+ 都支持）
- 缺点：污染 HTML 结构，纯为样式目的添加无意义标签
- 不推荐在现代项目中使用，除非要兼容非常老的环境且不能改 CSS
用 overflow: hidden 触发 BFC（更常用但有副作用）
给父容器设置 overflow: hidden（或 auto、scroll）会强制它创建 BFC，BFC 容器会包含内部浮动子元素，高度恢复正常。
.container {
overflow: hidden; /* 或 overflow: auto */
}- 优点：无需改 HTML，一行 CSS 解决
- 风险：如果父容器本就有溢出内容（比如横向滚动的图表），
hidden会直接裁剪，auto可能意外触发滚动条 - 替代方案：
overflow: auto更安全，但需测试是否引入多余滚动条；overflow: clip（现代浏览器）更精准，但 IE 不支持
更现代可靠的解法：display: flow-root
flow-root 是专为解决这个问题设计的 display 值，它会创建一个无副作用的 BFC 容器，不影响溢出行为，也不影响其他布局表现。
.container {
display: flow-root;
}- 兼容性：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+；IE 完全不支持
- 优势：比
overflow更语义化、更安全，是目前最佳实践 - 若需兼容旧版 Safari 或 Edge，可加回退：
display: flow-root; display: -webkit-flow-root;（但实际 WebKit 旧版也不支持，不如用overflow: auto回退）
真正容易被忽略的是：很多开发者只盯着“清除浮动”，却忘了检查父容器是否设置了固定高度、min-height 是否被覆盖、或者浮动元素本身有没有 vertical-align 导致基线对齐异常——这些都可能表现为类似“空白”的视觉问题。先确认是不是真由浮动引起，再选对应方案。
