溢出可见时 CSS 背景消失

Question

我的网站具有以下基本结构。这个网站应该有一个白色的背景，一个图像出现一次，但它只是继承了 CSS 中 html{ } 声明的颜色。应具有背景的元素下方的所有元素都是透明的，即使正在添加背景(在 Firebug 中检查)，这似乎低于 html{ } 中定义的背景。

这只是在我从 #content-container 中删除了声明 overflow: none; 之后才发生的，它和以前一样有效。然而，我需要删除它，因为网站发生的变化需要导航菜单有下拉菜单，所以下面的容器必须允许溢出。

发生这种情况是否有特定的 CSS 原因？或者我需要提供什么其他人才能提供帮助？谢谢。

<div id="main-container">

    <div id="header-container">
        <div id="header-top">
            {Code}
        </div>

        <div id="header-middle">
            {Code}
        </div>

        <div id="header-nav">
            {Code}        
        </div>
    </div>

    <div id="content-container">
        <div id="content-left" class="index">  
            {Code}
        </div>

        <div id="content-right">
            {Code}
        </div>
    </div>

    <div id="footer-container">
        {Code}
    </div>

</div>

Answer 1

我猜 #content-left 和 #content-right 元素是 float 的？在这种情况下，#content-container 上的 overflow: none 导致元素自清除。如果没有这个，元素将没有高度，因为其中的所有元素都是 float 的，因此无法计算容器的高度。

如果您必须使用 overflow: visible，解决方法是在包含 clear: both 的包含元素的末尾放置一个 div设置它:

<div id="content-container">
    <div id="content-left" class="index">  
        {Code}
    </div>

    <div id="content-right">
        {Code}
    </div>

    <div class="clear"></div>
</div>

.clear { clear: both; }