clearfix

0pt

最近のブラウザだったらこれでいいらしい!

element{ /zoom : 1; }
element:after{ content : ''; display : block;
  clear : both; }

http://www.yomotsu.net/wp/?p=561



floatしたボックスは、来あるべき場所から飛び出るので、同階層に他に内容がなければ、親の見た目が空になってしまう。よって、borderがうまくつけられない。

clearfixとはそれを防ぐtipsのこと。

HTMLfloatしたボックスの次に何か要素を入れればいいのだけど、HTMLに余分な要素が入るのはスムーズな解決ではない。そこで、このclearfixではcssのafter擬似要素を使って要素を追加している。

IE対応でzoom入れてるけどどういう効果なかはよくわからない

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

これを親要素につける

<div class="clearfix">
  <div class="floatleft">
     left side
  </div>
  <div class="floatright">
     right side
  </div>
</div>


http://archiva.jp/web/html-css/clearfix.html
http://norisfactory.com/stylesheetlab/000038.php

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

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

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

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

お気に入りの説明

1 pt
親box内の要素をすべてFloatすると、親boxの height が0(みたい)になる現象が起きる。 clearfix (正式に名前は 定義 されていないが・・・)を用いると、それを防ぐことができる。つまり、どんな...
もっと読む

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

他の人の「clearfix」を見る