父容器需创建BFC以包裹浮动子元素：推荐用::after伪元素加clear:both，兼容IE8可设display:table；现代方案用display:flow-root（Chrome58+等支持），但旧版iOS/IE需回退伪元素法。
浮动元素让容器高度塌陷，背景图只显示一截怎么办
容器没高度，background-image 自然只在“看得见”的那一丁点区域渲染——这不是图片问题，是父容器根本没包裹住浮动子元素。核心解法就一条：让父容器感知到浮动内容的高度。
clear: both 不能直接加在父容器上，得用伪元素或额外标签
clear: both 本身只对「紧跟在浮动元素之后的块级元素」生效，直接写在父容器上毫无作用。必须让它后面“多出一个东西”来触发清除。
- 推荐用
::after伪元素，干净、无冗余 DOM：.container::after { content: ""; display: block; clear: both; } - 如果兼容 IE8，
display: table更稳：.container::after { content: ""; display: table; clear: both; } - 避免用空
<div class="clear"></div>，维护成本高，语义差
overflow: hidden 看似简单，但会意外裁剪定位元素
设 overflow: hidden 确实能闭合浮动，因为浏览器会重新计算包含浮动的 BFC 区域。但它副作用明显：
- 子元素用了
position: absolute且超出容器边界时，会被直接切掉 - 有横向滚动需求（比如长表格）时，
overflow: auto可能误触发滚动条 - 某些动画或 transform 场景下，渲染行为可能不稳定
现代方案：display: flow-root 最干净，但注意兼容性
display: flow-root 是专为解决这个问题设计的——创建新 BFC 且不带副作用。但它在 IE 完全不支持，iOS Safari 早于 10.3 也不行。
立即学习“前端免费学习笔记（深入）”；
- 能接受兼容范围（≥ Chrome 58 / Firefox 53 / Safari 10.3 / Edge 16）就直接用：
.container { display: flow-root; } - 需要支持旧版 iOS 或 IE？老老实实用
::after + clear，别省这点判断逻辑 - 别混用
flow-root和overflow: hidden，后者会覆盖前者的行为
最常被忽略的是：即使用了 flow-root，如果子元素本身设置了 float: right 又没给宽度，容器仍可能因内容换行而表现异常——浮动的本质没变，只是父容器终于“看见”它了。
