父母身高不跟隨他們的浮動兒童

這裏是我的代碼你有任何建議，請指教。

我需要提前CSS的解決方案不是JavaScript的，所以，謝謝

<div id="mainContainer"> 
    <div id="leftContent"> 

    </div> 

    <div id="rightContent"> 

    </div> 
</div>

，這裏是我的CSS

#mainContainer{ 
    width: 1000px; 
    /*height: 1000px;*/ 
    height:auto; 
    margin-left:auto; 
    margin-right:auto; 
    background-color: #ff6600; 
    padding-bottom: 20px; 
} 
#leftContent{ 
    height: 100px; 
    float: left; 
    width: 380px; 
    background-color: violet; 
} 
#rightContent{ 
    height: 100px; 
    float: right; 
    width: 620px; 
    background-color: yellow; 
}

來源

2013-05-11 Jongz Puangput

你可以將一個clearfix應用於元素。家長的高度不會適應標準的浮動元素。 – 2013-05-11 03:34:01

添加overflow:hidden;到容器：

#mainContainer{ 
    width: 1000px; 
    /*height: 1000px;*/ 
    height:auto; 
    margin-left:auto; 
    margin-right:auto; 
    background-color: #ff6600; 
    padding-bottom: 20px; 

    overflow: hidden; /* <--- here */ 
}

因爲其內容浮動，容器div崩潰。使用'clearfix'類，或者，正如我所提到的那樣，添加overflow:hidden將導致容器包含浮動元素。

UPDATE爲什麼這個作品說明可以在這裏找到：https://stackoverflow.com/a/9193270/1588648

...這裏：

爲了讓他們（瀏覽器）來計算什麼溢出的塊的邊界（因此應該隱藏），他們需要知道塊的大小。由於這些塊沒有設置明確的高度，所以瀏覽器使用計算的內容高度來代替。

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

來源

2013-05-11 03:32:44

哇，拯救我的生命。我已經坐了3個小時沒有什麼值得感謝的@Kevin Boucher – 2013-05-11 03:36:53

但是您能否更詳細地描述爲什麼會溢出：隱藏解決這個問題的方法是如何讓容器容納浮動。 – 2013-05-11 03:39:28

很高興我能幫到你。快樂的編碼！ – 2013-05-11 03:39:58

你需要清除浮動元素，使用overflow: hidden;爲#mainContainer

Demo

備選：（您可以添加clear: both;清除浮動）

Demo

或者你也可以自行清晰浮動元素（只有當你想支持IE9 = +

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

Why this happens?

來源

2013-05-11 03:33:31

這就是它應該做的！ 'overflow：hidden'可以......好吧..只是隱藏內容。 – 2015-12-11 23:15:45

使用溢出：隱藏和清除浮動

#mainContainer{ 
    width: 1000px; 
    height:auto; 
    margin-left:auto; 
    margin-right:auto; 
    background-color: #ff6600; 
    padding-bottom: 20px; 

    overflow: hidden; 
    clear: both; 
}

來源

2013-05-11 03:37:47

父母身高不跟隨他們的浮動兒童

回答

相關問題