bitFlyer ビットコインを始めるなら安心・安全な取引所で bitFlyer ビットコインを始めるなら安心・安全な取引所で

CSS ClearFixで親ボックスの背景を表示する。

古いブラウザでは誤ったcssの解釈レンダリングされ正しいcssを書いても思うように表示されないことが多々あります。

なので、cssリセットしたり、clearfixなどを使い出来るだけブラウザ毎の差異をなくす事が必要になります。

今日は、一昔前に流行っていたclearfixについて考えて見ました。

clearfixは下記のような物です。
[html]
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clear { display: inline-table; }

* html .clear { height: 1%; }
.clear { display: block; }
.floatcontainer {display: inline-block;}

* html .floatcontainer {height: 1%;}
.floatcontainer {display:block;}
[/html]

上記clearをクラスとして対象の親ボックスなどにつけてあげればフロートが解除されるわけですね。

簡単なレンダリングの流れは、
afterでボックスの後にclear:bothを追加後、フロート解除。
visibility: hidden;本来見える必要のない物なので隠す。

ですが、CSSリセットもclearfixの使いどころも適材適所で考えたほうがスマートですよね。
Clearfixは確かに便利です!、、、、筆者はあまり使っていません。理由は3つあります。

  1. clear:both;でフロート解除すればほとんどのケースで必要無い。
  2. htmlを出来るだけシンプルにするため。
          (人によってはHTMLソースでフロートを解除した場所がわかるようにするためclearfixを使うなんて方もいっらっしゃいました、、)
  3. cssの仕様を尊重したいから。

1:については、clearfixでないとできないレイアウトがあるかもしれませんがcssの仕様書見て
そうは思えなかった。あくまでも筆者の意見です。

2:そのままです。htmlをシンプルにするためです。

3:html,cssは仕様なので。ブラウザも本来そうあるべきだから。

前置きが長くなりましたが、css backgroundが表示されない場合その親要素にclearfixをつけてあげれば回避できます。(overflow:hiddenでも可)

bitFlyer ビットコインを始めるなら安心・安全な取引所で bitFlyer ビットコインを始めるなら安心・安全な取引所で