floatでのdiv配置

非常にはまりました。

+


































l BODY                             l
l +--------+  +------------------+ l
l l A      l  l B                l l
l l        l  l +-----+  +-----+ l l
l l        l  l l B1  l  l B2  l l l
l l        l  l l     l  l     l l l
l l        l  l +-----+  +-----+ l l
l l        l  l +--------------+ l l
l l        l  l l B3           l l l
l l        l  l l              l l l
l l        l  l +--------------+ l l
l +--------+  +------------------+ l





































































+

divでこんなのを作る時の話です。
AとBだけであれば、float:left, float:rightで
最後にclear: bothとかで楽勝です。

もうひとつ、B1とB2なしで、B3だけをBの中に
作るのも楽勝ですね。

しかし、B1とB2をこのように配置して、その下に
B3を作りたいとき。こういうものをどう作るか。
これは難しいのです。

B1とB2を別のdivに内包して、そこでclear: bothすれば
いいように思えますが、そうするとAの下まで空白に
なっちゃいます。（Aが終わったところでB3が表示されます）。

そんな時は、そのdiv（B1とB2を内包する）に対して、

overflow: hidden;

を指定すれば！解決！
すごい！すごすぎ！

【CSS】clearfixを使わずにfloatを解除する | バシャログ。
http://c-brains.jp/blog/wsg/08/03/25-210042.php

clearfixを使わないでfloatを解除する方法 - Rewish
http://rewish.org/xhtml_css/no_clearfix

子にフロートボックスを含む時の親ボックスの背景 - 徒書
http://www.akatsukinishisu.net/itazuragaki/css/i20050614.html

floatしたボックスを含む親ボックスの高さの算出｜カラクリエイト
http://www.extype.com/karakuri/archives/2005/10/float.html