初心者も簡単ブログにコピペだけ!1クリック高単価7〜42円。登録無料最短1分でスタート。

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

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

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

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

clearfixは下記のような物です。

.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;}

上記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でも可)

ダイレクト特集ページ用バナー(ダウンロード版)

初心者も簡単ブログにコピペだけ!1クリック高単価7〜42円。登録無料最短1分でスタート。