浮遊する新しい単語をクリアする

起源：

.clearfix:後 {
可視性: 非表示;
表示: ブロック;
フォントサイズ: 0;
コンテンツ： " ";
クリア：両方。
高さ: 0;
}
.clearfix { 表示: インラインテーブル }
/* IE-mac からは非表示になります */
* html .clearfix { 高さ: 1% }
.clearfix { 表示: ブロック }
/* IE-mac からの非表示を終了 */

説明します:

• *ターゲット要素のフロートをクリアする非表示の空のコンテンツ ブロックを作成することを目的として、最初の宣言ブロックをほとんどの標準準拠ブラウザに適用します。
• *2 番目の項目は、IE/Mac のみに、clearfix のインライン テーブル表示属性を適用します。
• *悪用* / IE/Mac から一部のルールを非表示にします:
• * height:1% は、IE6 で haslayout をトリガーするために使用されます。
• ※IE/Mac以外のIEにはブロック表示属性を再適用してください。
• *最後の行は、IE/Mac のハックを終了するために使用されます。

この方法の対象となるブラウザはすでに過去のものになっているか (特に Mac の IE5)、標準になりつつあるため、この方法はもはや最新のものではありません。

IE/Mac のサポートが終了した後、フロートをクリアする新しい方法が追加されました。

/* 新しいクリアフィックス */
.clearfix:後 {
可視性: 非表示;
表示: ブロック;
フォントサイズ: 0;
コンテンツ： " ";
クリア：両方。
高さ: 0;
}
* html .clearfix { ズーム: 1 } /* IE6 */
*:first-child+html .clearfix { ズーム: 1 } /* IE7 */

説明します:

IE6 も IE7 も :after 疑似クラスをサポートしていないため、IE6/7 の haslayout をトリガーして float をクリアするには次の 2 つが必要です。幸いなことに、IE8 は :after 疑似クラスをサポートしています。したがって、IE6/7 用のハックのみが必要です。