Floatが僕は嫌いです。

Floatしだすと、レイアウトがぶっ壊れるので、いつもドキドキでした。
最近は、パワープレーでぶっ壊れてもなんとかしてたんですけど、
対面のデザイナーに、ある時ソースを見られて、ありえねーこいつありえねーみたいに言われたので
ちゃんと覚えようと心に決めました。

そんな訳で、会社にあった専門書を拝借しまして、また一からCSSを覚えなおしております。

で、分かった事は

・floatはそもそもレイアウト用のプロパティじゃない
・clearは下の親要素に入れると表示が崩れる
・floatはbrockとして扱われる

ってことです。

・Clearは下の親要素に入れると表示が崩れる

表示が崩れると書いたんですけど、実際は違うのかもしれませんね。
頭の出来があんましよくないので、こうやって解釈した方が僕は分かりやすかった。
正確には崩れる可能性があるってことです。

思う様にfloatしてる親要素のBoxが上手く開かない。
あれってClearの指定位置が悪かったんです。

図にするとこんなん

下の要素っていうのは、この図で言うとｐです。
親要素の外で、Clear使うと回り込みだけ解除されるので、
イメージだけは、親要素からはみ出ます。

でも、親要素内でclearを使えばこうなります。

新しくブロック要素を追加しないで、after使ってやるのが、今の流行っぽいです。
昔の流行を知ってるわけじゃないですけど、今の流行っぽいです。「clearfix」って奴らしいです。

・floatはブロックとして扱われる

コレも知らなかった。ただ、サイトに書いてある、IEの余白バグの回避方とやらを
そのまま実戦してただけなので、何で大丈夫なのか全く意味が分からなかったんですが、
CSS2,1の仕様で、Floatしたら、勝手にBrockになるみたいですね。
なので、どんどんInline指定しましょう。

IE6以外のブラウザだと、display:inline;?何書いてあるかわかんねーよ！ってなるらしいです。

こんだけで、マージン倍のIE6バグは回避できます。
なので、floatする場合常に書いておいたほうが良いかも知れないですね。