私の "コンテナ" divに浮動要素が含まれていないのはなぜですか？

Question

私は学校 "Math Relay"のためのウェブサイトを作成しています。

コンテナ内に「コンテナ」div（白い背景）、次にトップバー、左バー、右バーのdivがあります。

left-barとright-barは両方とも "Container"の内側に浮かんでいます。

ただし、下の画像を見ると、右のバーの下に灰色の背景が表示されていることがわかります。 「コンテナ」に真上、左、右の両方のバーが含まれている場合は、コンテナの背景にスルーを表示し、ボトムにはすべて白い色の均一なレベルにする必要があります。

代わりに、コンテナには左のバーが完全に含まれていないように見えるため、実際の身体の背景が右のバーの下に表示されます。ページhereへ

#container { 
    margin: 0 auto; 
    width: 750px; 
    background-color: #ffffff; } 

#top-panel { 
    background-color: #000000; 
    text-align: left; 
    width: 100%; 
    height: 88px; 
    float: left; } 

#left-panel { 
    clear: left; 
    text-align: center; 
    background-color: #ffffff; 
    border-right: 1px dashed #000000; 
    float: left; 
    width: 250; } 

#right-panel { 
    background-color: #ffffff; 
    float: left; 
    width: 499; } 

リンク：

は、ここに私のCSSです。

"コンテナ"に実際にdivが含まれるようにするにはどうすればいいですか？灰色の背景が右パネルの下に表示されず、下に段差がありますか？

Answer 1

両方のパネルがフローティングであるため、ページの通常の流れから取り除かれます。コンテナをカプセル化するには、フロートをクリアする必要があります。私がするのは、brのためのクラスを明確にすることです：

.clear { 
    clear:both; 
    line-height:0; 
} 

このように、それはスペースを取らず、はっきりしています。コンテナ部門の2つのdivの下に置いてください。

<br class="clear" /> 

Answer 2

封じ込めを強制するものは何もありません。最後の要素に透明を指定して、味覚を強制することができます。一般的なハックはclear:bothすなわちで追加のブロッキング要素を追加することです：<div style="clear:both"></div>

Answer 3

overflow: auto 

はそれを修正する必要があります。

Answer 4

clearfixという問題に対処するためのCSSのみの方法があります。それはあなたが欲しいのdiv要素に選択的に適用するクラスとしてそれを使用するのが最善です：あなたの特定のマークアップのために

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

、以下のCSSは行います：http://www.positioniseverything.net/easyclearing.html

Answer 5

overflow:hidden; height:100%; <-- for ie 

#left-panel:after, 
#right-panel:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

リファレンス

コンテナでそれを行います。