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する場合常に書いておいたほうが良いかも知れないですね。
