CSS：含有對浮子沒有高度DIV設置

假設我們有以下代碼：CSS：含有對浮子沒有高度DIV設置

<div id='upperDiv' style='min-height:200px;border: 1px solid #000000;'> 
    <div id='rightDiv' style='float:right;width:75%;'> 
     content1 
    </div> 
    <div id='leftDiv' style='float:left;width:25%;'> 
     content2 
    </div> 
</div> 
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'> 
    content3 
</div>

當rightDiv和leftDiv的內容經過200像素高度（最小高度）upperDiv不生長，因此它的內容的重疊低分。如果我刪除它增長的大內容的float屬性，將會有問題。但我不知道哪個Div（rightDiv或leftDiv）傳遞200px的高度。我該如何解決這個問題？

感謝

來源

2010-10-24 RYN

設置#upperDiv以下任何一項：

overflow: hidden; 
width: 100%;

或

float: left; 
width: 100%;

或使用CSS僞元素（IE8 +兼容）這樣

#upperDiv:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

創建規則

最佳解決方案
創建類似下面的可重用類規則。

.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

現在，您可以將它應用於任何需要此功能的應用程序。例如...

<div id='upperDiv' class="group" ... >

P.S.如果您需要IE 6/7兼容性，請檢查this post。

來源

2010-10-24 19:13:42 jessegavin

非常感謝你 – RYN 2010-10-24 19:16:31

這是故意的，因爲浮動圖案是設計用於像段落中的圖像（其中多個段落可以環繞圖像）。

複雜螺旋有一個fuller explanation至於爲什麼和埃利埃略特描述了一些approaches to making containers expand around floats。我發現overflow: hidden方法在大多數情況下效果最好。

來源

2010-10-24 19:14:51 Quentin

這是一個很好的解釋性答案。良好的聯繫。 +1 – jessegavin 2010-10-24 19:17:22

非常感謝您的鏈接。 – RYN 2010-10-24 19:37:13

直到閱讀[複雜螺旋文章]（http://complexspiral.com/publications/containing-floats/）之前，我從未完全理解clearfix hacks。必讀！ – thinkOfaNumber 2017-05-16 12:44:02

後

<div id='leftDiv' style='float:left;width:25%;'> 
    content2 
</div>

添加

 <div style="clear:both"></div>

這將解決您的問題。

來源

2013-03-09 19:27:17 PJunior

非常棒！非常感謝你！清楚：都爲我做了詭計！ – Steven 2014-03-31 14:08:00

CSS：含有對浮子沒有高度DIV設置

回答

相關問題