clearfix

1pt

親box内の要素をすべてFloatすると、親boxのheightが0(みたい)になる現象が起きる。

clearfix(正式に名前は定義されていないが・・・)を用いると、それを防ぐことができる。つまり、どんなにfloatしまくっても、親boxはちゃんとheightをキープするっつーことっすね。

まぁ、こんな感じの定義

/* clearfix */
.clearfix{
  zoom:1;/*for IE 5.5-7*/
}
.clearfix:after{/*for modern browser*/
  content:".";
  display: block;
  height:0px;
  clear:both;
  visibility:hidden;
}
* html .clearfix{
  display:inline-table;
  /*\*/display:block;/**/
}


これめっちゃ便利やな~。
今まで親ボックス内の最後で<br>とか<hr>とかでclearしてまひた。
そんな非論理的なこと、もうしなくて済むよ!!

「clearfix」について友人に書いてもらう。

あなたにとって「clearfix」とは?

ログインするとワンクリックでキーワードを投稿できます

ログインする 新規登録する

お気に入りの説明

0 pt
最近のブラウザだったらこれでいいらしい! element{ /zoom : 1; } element:after{ content : ''; display : block; clear : both; } http://www.yomotsu.net/wp/?p=561 float したボックス...
もっと読む

関連したキーワードを持つお気に入り

他の人の「clearfix」を見る