父容器背景不显示是因为浮动导致高度塌陷，clear: both仅作用于单个元素而非修复父容器包裹性；推荐用display: flow-root创建bfc解决，或改用flex/grid布局替代浮动。
为什么加了 clear: both 父容器背景还是不显示
单独给某个子元素写 clear: both，只能让它自己下移到浮动元素下方，但父容器依然“看不见”浮动子元素——高度还是 0。背景没地方画，自然不出现。常见错觉是“清了浮动就万事大吉”，其实它根本没修复父容器的包裹能力。
.clearfix::after 写不对等于没写
经典伪元素清除法必须满足三个硬性条件，漏一个就失效：
-
content: ""缺不得，写成content: none或直接省略，伪元素就不渲染 -
display必须是block或table；inline下clear完全无效 - 不能设
visibility: hidden或display: none，否则它不占布局空间，撑不起高度
推荐最小可靠写法：
.clearfix::after { content: ""; display: block; clear: both; }旧版 Safari 可用 display: table，但别在现代项目里无脑复制网上残缺版本。
现代项目优先用 display: flow-root
一行代码替代所有清除逻辑，且无副作用：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 直接给父容器加
display: flow-root，它会创建 BFC，天然包裹浮动子元素 - 不会像
overflow: hidden那样裁剪阴影、下拉菜单或position: fixed元素 - Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 均支持；IE 完全不支持
如果要兼容 IE11，仍需回退到 .clearfix；但只要目标环境明确支持，flow-root 就是最干净的选择。
真正该做的不是清浮动，是换掉它
浮动本意是文本环绕，不是布局工具。继续拿它做两栏、卡片、网格，每个背景、边框、阴影都得补坑：
- 单行多列：用
display: flex，子项自动撑高父容器，背景从一开始就在 - 二维网格：用
display: grid，grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))响应式搞定 - 图文环绕场景极少需要父容器背景；真需要，单独包一层非浮动容器更可控
即使用了 clearfix 或 flow-root 让背景回来了，浮动仍在影响 margin 折叠、z-index 层级、absolute 定位基准——这些细节，开发者工具里一帧一帧看才容易发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
