clearfixのメモ

実は今までclearfixという存在をしらなかった（恥＆汗

とても参考になる記事
http://kojika17.com/2011/04/floatclearfix.php

clearfixのコード

.clearfix:after{
    content: "."; /*指定した要素の後ろに(実体のない)オブジェクトを表示 */ 
    display: block; /*ブロックレベル要素に */
    height: 0; /* 高さは0*/
    font-size:0;	/* フォントサイズも0*/
    clear: both; /* もちろんフロート解除*/
    visibility:hidden;/* 非表示*/
    }

上記が一般的なコードと思われる。

しかし、私にとっては意味不明なものがいっぱいw
そもそもafter疑似要素って何？
で、参考にしたのがコレ
http://zero.css-happylife.com/selectors/after.shtml
ほーなるほど、contentプロパティとの組み合わせで、指定した要素の後に指定した内容を生成できると…
しかもheightを指定するのはフロートをしている子要素があると
IE以外のブラウザだと、親要素の高さを算出させなくてはならない意味があったのね。

ちなみに｢/zoom:1;｣のようにプロパティの前にスラッシュをつけると
IE6と7だけに適用されるようです。
http://www.coolwebwindow.com/csstips/csstechnic/000277.php

hasLayoutとは（IEでのCSSのバグを回避するhasLayout | コリス）
http://coliss.com/articles/build-websites/operation/css/143.html

但し、zoom:1の利用も計画的が必要とのこと。
http://likealunatic.jp/2007/09/16_zoom1.php

以上メモ書き

追記
ちなみにグローバルナビゲーションのようにli要素でマークアップし横に並べるのを
floatプロパティで行った場合、ul要素のなかにはli要素以外の要素を
入れてはいけないので、親要素のul要素に「clearfix」を適用する。

タグ：cleafix float