div元素background-color无法正常显示，请求排查代码问题

你的问题出在绝对定位元素导致父div高度塌陷：所有内部的<i>图标都是绝对定位，会脱离文档流，不会撑开.Header这个div的高度，导致div高度为0，背景色自然看不到。而p标签本身有默认的内边距/行高，所以有高度，背景色能正常显示。

解决方法（任选其一） #

1. 给.Header设置固定高度并添加相对定位 #

给div设置高度，同时添加position: relative让内部绝对定位元素以这个div为参照（避免图标跑到页面其他位置）：

.Header {
  background-color: #bcc4c5;
  height: 100px; /* 根据内容调整高度 */
  position: relative;
}

2. 使用BFC清除高度塌陷 #

通过display: flow-root创建块级格式化上下文，让div自动撑开高度：

.Header {
  background-color: #bcc4c5;
  display: flow-root;
}

3. 调整内部元素的定位方式 #

如果不需要绝对定位，可以把内部图标的position: absolute改成position: relative，再调整top/left值，这样元素会留在文档流里，撑开父div高度。

修改后的HTML结构不变，只需要调整CSS即可看到背景色正常显示。

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