浮动元素导致父容器高度塌陷，背景“消失”实为高度变为0；应使用clearfix伪元素或display: flow-root解决，而非给父容器加clear:both。
为什么浮动元素后面父容器背景会消失
因为浮动元素脱离了文档流，父容器计算高度时直接忽略它们，导致高度塌陷——看起来就像背景“不见了”。这不是背景没生效，是父容器实际高度变成0了。
- 常见错误现象：
div设置了background-color，但只看到顶部一小条色块，或完全看不到背景 - 检查方法：打开浏览器开发者工具，选中父容器，看
Computed里的height是不是0px - 触发条件：子元素用了
float: left或float: right，且父容器没设置固定高度或清除机制
clear: both 为什么不能直接加在父容器上
clear作用对象是“自身”，不是子元素。给父容器加clear: both毫无效果，它既不清除子元素的浮动，也不影响自身高度计算。
- 正确位置：必须加在浮动元素之后的某个兄弟元素上（比如
<div style="clear: both"></div>） - 更常见的写法是用伪元素，避免额外DOM节点：
::after+content: ""+clear: both - 注意
display：伪元素默认是inline，必须设为block或table才能生效
推荐的clearfix方案及兼容性差异
现代项目优先用display: flow-root，老项目用clearfix类。两者都比overflow: hidden更安全。
-
display: flow-root：一行解决，无副作用，Chrome 58+/Firefox 53+/Safari 10.1+ 支持，IE不支持 -
clearfix经典写法：.clearfix::after { content: ""; display: table; clear: both; } - 别用
overflow: hidden：虽然能撑开高度，但会意外裁剪position: absolute子元素或阴影
Flex/Grid 布局下还用担心浮动吗
基本不用。一旦父容器设了display: flex或display: grid，子元素即使有float也会被忽略，高度自动包含。
立即学习“前端免费学习笔记（深入）”；
- 但要注意：
float本身仍会生效（比如文字环绕），只是不影响布局流和父容器高度 - 真正想“清除浮动”的场景，往往说明你还在用传统浮动布局——这时候该考虑是否该迁移到Flex或Grid了
- 如果必须保留浮动（如兼容旧代码），就老老实实用
clearfix或flow-root，别指望Flex容器帮你“顺带”解决
margin-collapse失效、z-index层级错乱）。修完记得再扫一眼周围元素的表现。 
