父DIV背景色未继承给子DIV？CSS新手求助解决方案

嘿，作为CSS新手踩这个坑太正常啦，我来给你掰扯清楚～

首先得纠正一个认知：CSS里的背景色（background-color）并不是默认继承的属性，所以子元素不会自动“拷贝”父元素的背景色哦。你看到父元素wrap有背景，但子元素inputQL、inputQR没显示，大概率是两种情况之一：

情况1：子元素脱离文档流导致父元素高度塌陷 #

如果你的inputQL、inputQR用了float属性，那它们会脱离正常文档流，父元素wrap如果没设置固定高度，就会“塌缩”成高度为0的状态——看起来wrap的背景色没覆盖到子元素区域，其实是wrap本身没包住子元素。

解决方法：给wrap添加清除浮动的样式，让它重新包裹住子元素：

.wrap {
  /* 你的原有样式 */
  background-color: #xxx;
  /* 方法1：用overflow隐藏溢出，简单快捷 */
  overflow: hidden;
}

/* 方法2：用伪元素清除浮动（更推荐，不会影响元素内的溢出内容） */
.wrap::after {
  content: "";
  display: table;
  clear: both;
}

这样wrap的背景色会填充整个包含子元素的区域，子元素如果没有自己的背景色，就会透出父元素的背景啦。

情况2：直接让子元素继承/设置相同背景色 #

如果子元素本身有默认背景（比如浏览器自带的白色），或者你就是想让子元素明确拥有和父元素一样的背景，有两种方式：

• 方式1：给子元素设置inherit值，强制继承父元素的背景色：

.inputQL, .inputQR {
  background-color: inherit;
}

• 方式2：直接把父元素的背景色同步给子元素，统一管理样式：

.wrap, .inputQL, .inputQR {
  background-color: #你的背景色值;
}

小总结 #

先排查子元素是否浮动导致父元素塌陷，这是新手最常遇到的问题；如果是单纯想让子元素和父元素同背景，用inherit或者统一设置样式都可以～

内容的提问来源于stack exchange，提问作者acr