HTML容器未正確設置子div的樣式

Question

我正在嘗試設置容器div以及其中所有子div's背景顏色，但是由於某種原因我無法使其正常工作，而且我不確定我要去哪里。

當我在容器上設置background-color和邊框時，可以看到它實際上沒有“包含”任何子元素。

#facility_container{
    text-align: center;
    padding: 2px;
    width: 100%;
    background-color: #ffffff;
}

這是一個JSFiddle，展示了我到目前為止所處的位置。

Answer 1

添加overflow: hidden到#facility_container ， #facility_general_info ， #facility_section_info

Float使內部div不擴展外部div。 在HTML5中，使用表格設置來設置頁面樣式是一件大事。

工作的jsfiddle： https ://jsfiddle.net/nayish/docg128w/8/

Answer 2

這里的問題是，由於#facility_info div是浮動的，因此它們不包含在常規元素流中，因此不會影響#facility_container div的寬度或高度。

正如Jon Ducket在他的書HTML＆CSS中所建議的那樣 ：
將容器div的溢出屬性設置為auto，將其width屬性設置為100％。

#facility_container {
    text-align: center;
    padding: 2px;
    width: 100%;
    background-color: #ffffff;
    width: 100%;
    overflow: auto;
}

在這種情況下，由於#facility_general_info已經占用了寬度和高度，因此不必將#facility_container的寬度設置為100％，但是上述屬性值可用於僅包含浮動元素的元素。