Css 为什么我的<；ul>；具有非'；不是它的父母吗？

我正在尝试构建一个带有标题的页面，其中在底部包含一个导航栏。但是，导航栏的背景颜色是主要内容，而不是标题

我在网站上搜索了类似的问题，并尝试了overflow:hidden，或者按照建议将overflow:auto添加到.main，但这些解决方案都不起作用。我还尝试从css中删除一些行，例如float:left；这也没用。添加背景：inherit to ul仅为导航栏周围的一个小区域提供背景颜色，而不是标题的宽度

.main{
背景色：暗绿色；
边界半径：15px；
最大宽度：1000px；
保证金：0自动；
文本对齐：居中；
高度：800px；
}
标题{
背景：黄绿色；
边界半径：15px 15px 0；
填充：10px 10px 10px 10px；
}
保险商实验室{
浮动：左；
显示：块；
位置：绝对位置；
左边距：-45px；
}
李{
显示：内联；
背景：青色；
边框：2件纯黑；
边界半径：5px5px0；
左边距：-5px；
}
h1{
字体大小：35px；
利润率：10px0；
}
img{
最大高度：150像素；
最大宽度：150px；
}
.项目{
显示：内联块；
填充：60px；
边缘顶端：40px；
宽度：200px；
高度：200px；
浮动：左；
}
氢{
字体大小：25px；
}

画廊






图1

这是由于

位置：绝对

和

浮动：左

使元素脱离文档流

.main{
背景色：暗绿色；
边界半径：15px；
最大宽度：1000px；
保证金：0自动；
文本对齐：居中；
高度：800px；
}
标题{
背景：黄绿色；
边界半径：15px 15px 0；
填充：10px 10px 10px 10px；
}
保险商实验室{
显示：块；
左边距：-45px；
文本对齐：左对齐；
左边距：20px；
}
李{
显示：内联；
背景：青色；
边框：2件纯黑；
边界半径：5px5px0；
左边距：-5px；
}
h1{
字体大小：35px；
利润率：10px0；
}
img{
最大高度：150像素；
最大宽度：150px；
}
.项目{
显示：内联块；
填充：60px；
边缘顶端：40px；
宽度：200px；
高度：200px；
浮动：左；
}
氢{
字体大小：25px；
}

画廊






图1

在CSS文件中的头更改 背景：黄绿色； 到

---

背景色：黄绿色

头{溢出：隐藏}

。当您在容器中浮动某个对象时，该容器将崩溃（除非它包含未浮动的对象）。将其溢出设置为隐藏将强制长方体随浮动元素展开。编辑：哦，定位也有问题。因为元素是绝对定位的，所以容器不知道它应该有多高（所以它变成0px高）。