clearfixの履歴

履歴一覧

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

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

HTMLでfloatしたボックスの次に何か要素を入れればいいのだけど、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