起源:
.ClearFix:後{
可視性:隠された;
表示:ブロック;
フォントサイズ:0;
コンテンツ: " ";
クリア:両方;
高さ:0;
}
.clearfix {display:inline-table;
/* ie-mac */から隠す
* html .clearfix {height:1%;
.clearfix {display:block;
/ * IE-MACからHIDEを終了 */
説明:
*ターゲット要素のフローティングをクリアして目に見えないヌルブロックを作成することを目的として、最初の宣言ブロックをほとんどの標準準拠ブラウザーに適用します。
*2番目のアイテムは、IE/MACのみで、ClearFixのインラインテーブルディスプレイ属性を適用します。
*使用* / IE / MACからいくつかのルールを非表示:
*高さ:1%がIE6の下でHaslayoutをトリガーするために使用されます。
*IE/MACの外側にIEに表示されるプロパティをブロックします。
*最後の行は、IE/MACのハックを終了するために使用されます。
この方法は、履歴(特にMacでIE5)になったブラウザをターゲットにしているか、標準に向かっているため、この方法は時代ほど進歩的ではありません。
IE/MACのサポートを捨てた後、フローティングをクリアする新しい方法:
/ * new clearfix */
.ClearFix:後{
可視性:隠された;
表示:ブロック;
フォントサイズ:0;
コンテンツ: " ";
クリア:両方;
高さ:0;
}
* html .clearfix {zoom:1} / * ie6 * /
*:first-child+html .clearfix {zoom:1} / *
説明:
IE6とIE7は次のことをサポートしていません:擬似クラスの後、次の2つはIE6/7のハスレイアウトをトリガーしてフロートをクリアする必要があります。幸いなことに、IE8はサポートしています:擬似クラスの後。したがって、IE6/7のハックのみが必要です。