<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
2つのdivの間に背景色が表示されないのはなぜですか？ 
子divを持つdivの背景色
要素を浮動させるときは、浮動要素の幅を指定する必要があります。そうしないと、ブラウザ間で予期しない動作が発生する可能性があります。
Check this tutorial、CSSで浮遊することについての良い情報があります。
基本的に、コンテナdivにoverflow:hidden;を指定し、浮動要素に幅を指定すると、問題は解決されます。
<div style="overflow: hidden;">
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
</div>
あなたはフローIKEにこれを正常化したいところはどこでも同様に、あなたは別のdivを追加することができます：
<div>
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
<div style="clear:both;"></div>
<div>This div will be at the same place
as if the previous elements are not floated</div>
</div>
の両方が動作します:)
EDIT
別の方法私は最近、最初の要素を浮動させ、margin-leftを次の要素に設定することが頻繁に行われます。たとえば、
<div>
<div style="float: left; width: 300px;">Some text</div>
<div style="margin-left: 300px;">Some text</div>
<div style="clear: both;"></div>
</div>
この方法の利点は、次の要素（この場合は2番目のdiv）は固定幅を必要としないことです。さらに、3番目のdiv（clear: both;）をスキップすることもできます。オプションです。私は浮動小数点divが2番目のdivよりも長い場合に追加します。それを追加しないと、親divは常に2番目のdivの高さを取得するからです。
コンテナdivをoverflow: hidden;に設定するだけです。
要素を浮動に設定すると、ドキュメントの通常の「フロー」にはなりません。
div { background: #ccc; overflow: hidden; }
そして、あなたもフリーハンドで円を作っていませんでした。）
含むdivは何の高さを持っていないので、div Sが浮いているの両方からです。浮動小数点ではない第3の子divを追加する場合は、高さを0とclear:bothとし、背景色が表示されるはずです。
浮動要素は、親に特にoverflowスタイルを使用する子が含まれていない限り、親のサイズには影響しません。
外側のdivは、子divと同じ背景色を持ちますが、親の高さはゼロであるため、その背景は表示されません。
表示されている空白はボディ部分で、背景色をdivに設定しますが、本文には設定しません。それが、身体部分が空である理由です。
次のコードを追加する必要があり、空の部分の色に：あなたはボディスタイルで背景色を変更することで、本体の背景色を変更することができます
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
body{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
を。
ヤンク！可能であれば、 'clear：both'ハックを使わないでください。ほとんどの場合、常により良い解決策があります。 – PeeHaa
私は「オーバーフロー：隠された」トリックを知らなかった。 – Gareth
あなたは今日何かを学んだようです:)私のコメントを完成させ、さらに教育するために、CSS3（ドロップシャドウなど）を使いたいときに 'overflow：hidden;'ハックを使用するときは注意してください。幸運にも私たちはそれについても解決策を持っています：http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/ – PeeHaa