爲什麼div不包圍它的孩子？

我有一個img和兩p個div的裏面，當我申請爲什麼div不包圍它的孩子？

div#column! { 
    border: 1px solid red; 
}

的邊境僅顯示爲一條線。爲什麼會發生？下面是它的一個例子：http://jsfiddle.net/WZ8Gc/

來源

2013-08-06 Daniel_V

添加溢出：隱藏到它 – DarkBee

@DarkBee，它的工作。但你能解釋一下爲什麼會發生？溢出是什麼？ –

溢出：自動會更好，但它發生在你漂浮圖像 - 你需要清除浮動，否則包含對象將崩潰，設置對象的溢出也將使其行爲 – Pete

div#column_1 { 
     border: 1px solid red; 
     overflow : hidden;    
    }

或：

<div id="column_1"> 
... content .... 
    <div style="clear : both;"></div> 
</div>

來源

2013-08-06 07:51:01 DarkBee

使用額外的標記清除浮點數已經過時。改爲嘗試一個clearfix。 http://nicolasgallagher.com/micro-clearfix-hack/ –

因爲使用float的段落，而不是在容器上。這是一個更新的小提琴。 http://jsfiddle.net/WZ8Gc/2/

來源

2013-08-06 07:51:08 Tdelang

P float是問題，所以使用清除修復CSS可能它會幫助你

.clearfix:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
.clearfix { 
    display: inline-block; 
} 
.clearfix { 
    display: block; 
}

來源

2013-08-06 07:52:50 Sam

給在div＃COLUMN_1這樣的高度，使其顯示圖像周圍所有邊境。 div＃column_1 {border：1px純紅色;高度：205px; }

來源

2013-08-06 07:58:21

爲什麼div不包圍它的孩子？

回答

相關問題