【CSS】回り込み(float)解除の３つの方法

今更ですが、float解除の３つの方法、覚書

flaotを使って回り込みをした場合、floatを解除してやらないと、思わぬところでレイアウトが崩れる場合がありますね。(親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様のため)

---

解除するための１つ目の方法（これが基本？）

floatを使ったあとの要素に「clear」を使って解除してやる。

しかし、次の要素にclearを指定できない事が多い。そのため、解除のための中身が空（サイズがセロ）の要素(<div style="clear:left;"></div>)を子要素の最後に配置して、clearを指定するのが常套手段。

<div class="container"> <div class="item1">あいうえおかきくけこさしすせそ</div> <div class="item2">いろはにほへとちりぬるを</div> <div class="item3">アイウエオカキクケコ</div> <div class="item4">ABCDEFGHIJKLMN</div> <div style="clear:left;"></div> </div>

しかし、他にも方法があるようで。（ただし、若干反則も含む）

（なぜ今更float解除の話かというと、私はこの方法以外使ったことがなかったので・・・他の方法もあるとは、噂にはキイテイタノデスガ・・・という状態だったので、ちょっと確認してみたのです^^;）

---

２番目の方法：「overflow:hidden;」を使う。

floatを使ってる要素を含む親要素に「overflow:hidden;」を指定してやると、floatが解除される模様（若干反則気味）

なるほど、やってみたら、確かに解除されたようになりますね・・・ちょっと不思議(^^;)

---

３番目の方法：「:after」を使う。

floatを指定した要素に、疑似要素「:after」を指定してclearを指示してやり、その後の回り込みが解除されるようにするらしい。

これは文法的には正しいけれど、古いブラウザは対応していないとか。。。

やってみましょう

なるほど、できました。

※親要素にクラス(名前はなんでもよいですが)を付け加え、:afterで下記のように指定してやる .mawarikomi:after{clear:both;}

が、これもなんだか釈然としないなぁ・・・コードも長くなるし。

やっぱり、空要素を入れてclearしちゃったほうが、わかりやすくて良い気がします。。。(^^;)