div内でfloatを使うときの注意点

★HTML
＜div id="C"＞
　＜div id="A"＞テキストなど＜/div＞
　＜div id="B"＞テキストなど＜/div＞
＜/div＞

★CSS
#C{
　　　width:300px;
　　　padding:20px;
}

#A{
　　　width:140px;
　　　float:left;
}

#B{
　　　width:140px;
　　　float:right;
}


このようにするとします。
height は中に入る要素に合わせて変化させたいので
指定しません。

しかし、これで実際にみてみると、



このようになってしまいます。

こういう場合どうすればいいかというと、
div:C に overflow:hidden; を指定することで解決することができます。

#C{
　　　width:300px;
　　　padding:20px;
　　　overflow:hidden;
}

ただし、稀にこの方法で解決できないケースもあるようです。
そういう場合は、div:B の後に＜br /＞やカラの＜div＞を入れ、
clear:both; と指定しましょう。

※2011/4/20 こちらに追記があります。
div内でfloatを使うときの注意点2