父元素背景不显示是因浮动导致高度塌陷为0px；首选display: flow-root触发BFC无副作用，兼容现代浏览器；伪元素clearfix最稳妥兼容IE；overflow: hidden有裁剪等副作用；空div clear:both脆弱且治标不治本。
父元素背景色“不显示”，其实是它的 height 被浏览器算成了 0px —— 浮动子元素脱离文档流，父容器根本感知不到它们的存在，自然撑不开高度。这不是样式没生效，而是背景无处可画。
display: flow-root 是首选解法
这是专为解决高度塌陷设计的现代 CSS 属性，触发 BFC 但不附带副作用：
-
display: flow-root必须加在父容器上，且该容器本身得是块级（比如不是display: inline） - 它不会裁剪
position: absolute子元素、不会砍掉box-shadow、也不会干掉滚动条 - Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 均原生支持；IE 完全不支持
- 不能和
position: absolute同时用在一个元素上——后者会让flow-root失效
伪元素 clearfix 仍是最稳妥的兼容方案
当需要支持 IE8+ 或项目里已有大量浮动逻辑时，.clearfix::after 依然可靠，但必须写全：
-
content: ""缺一不可，否则伪元素不生成 -
display: table比display: block更稳妥，能避免 margin 折叠异常 - 父容器自身不能是
display: inline，也不能被height: 0或overflow: hidden锁死高度 - 若需兼容 IE7，得额外加
zoom: 1
overflow: hidden 看似简单，但容易漏掉副作用
它确实能“修好”背景，但本质是靠触发 BFC 强制包含浮动，代价是：
- 会裁剪
position: absolute下拉菜单、tooltip、弹窗等溢出内容 -
box-shadow落在父容器外的部分会被一并砍掉 - 如果父容器本该支持滚动（比如内容超长），
overflow: hidden会把滚动条干掉 - 对
inline元素无效，必须先确保父容器是display: block或display: inline-block
别再用空
这个做法能“撑开”高度，但极其脆弱：
- 它必须放在所有浮动子元素之后，写在中间或前面完全无效
-
display不能是inline或none；推荐display: block或display: table - 设了
visibility: hidden或display: none就失效——它得参与布局才能撑高 - 更关键的是：即使背景显示了，浮动仍在影响周围元素，比如
margin-collapse失效、z-index层级错乱、position: absolute定位基准偏移
真正卡住人的，往往不是“怎么闭合高度”，而是闭合之后忘了检查父容器是否还有可靠的尺寸锚点——比如图片加载延迟、字体未就绪、或 margin 折叠意外压缩了可用高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
