スポンサーリンク

Floatが僕は嫌いです。

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

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

で、分かった事は

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

ってことです。

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

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

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

図にするとこんなん

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

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

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

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

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

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

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

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事