親の高さが浮動小数点の子に従わない

Question

メインコンテナの高さが子供の幅に従わない

ここに私のコードはありますかアドバイスをお願いします。

私は事前に

<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; 
} 

Answer 1

がコンテナにoverflow:hidden;を追加しているCSSのソリューションではありませんJavaScriptを必要とする：

#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を追加すると、コンテナに浮動要素が含まれます。 https://stackoverflow.com/a/9193270/1588648

...と、ここで：それらのためのためには

（ブラウザ）ブロックの境界をオーバーフローし何を計算するために、この作品がここで見つけることができる理由の

UPDATE説明（隠されているはずです）、ブロックのサイズを知る必要がありました。これらのブロックには明示的な高さが設定されていないため、ブラウザーは代わりにコンテンツの計算された高さを使用しました。 （あなたがフロートをクリアするclear: both;を追加することができます）

Demo：あなたは#mainContainer

Demo

代替のためのoverflow: hidden;を使用し、あなたの浮動要素をクリアする必要があり

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

Answer 2

それともすることもできます自己明確な浮動要素（あなたはIE9 = +

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

Why this happens?

Answer 3

使用のオーバーフローをサポートしたい場合のみ：あなたの隠されたのとフロート

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

    overflow: hidden; 
    clear: both; 
}