包裝紙中未顯示背景色

Question

由於某些原因，＃CCC背景（寬度為100％）沒有顯示在下面的代碼中。 你知道為什么嗎？ ks

http://jsfiddle.net/DzaCq/5/

.wrap100pc {
    width: 100%;
    margin: auto;
    background: #ccc;
}

#bottom-left {
    float: left;
    width: 490px;;
    background: #5421c2;
    height: 300px;
}

#bottom-right {
    float: right;
    width: 490px;;
    background: #2ec4a6;
    height: 300px;
}

.clear:after {
    clear: both;

}


<div class="wrap100pc clear">
<div id="bottom-left">bottom-left</div>
<div id="bottom-right">bottom-right</div>
</div>  <!-- End DIV Wrap100pc Clear-->

Answer 1

無需將overflow:auto添加到div#wrapper 。 您的.clear樣式定義不能固定.wrapper高度。

更改為：

.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

解決您的問題。

演示

Answer 2

要恢復背景，請將overflow:auto添加到您的#wrapper div中。

.wrap100pc {
    width: 100%;
    margin: auto;
    background: #ccc;
    overflow:auto;
}

jsFiddle示例

浮動子div具有自己的塊格式上下文，並且應用overflow：auto（或隱藏）會產生您想要的結果。 有關塊格式化上下文的深入解答，請參閱CSS塊格式化上下文如何工作？

Answer 3

您只需要在包裝器中添加float:left即可：

http://jsfiddle.net/DzaCq/3/

.wrap100pc {
    width: 100%;
    margin: auto;
    background: #ccc;
    float:left;
}

編輯：如果您不希望它浮動，使用overflow的其他答案也將同樣有效。

Answer 4

您需要為.wrap100pc指定height 。

希望有幫助！