フロートを解消するための最適化計画を共有する

clearfix ハックは、追加のタグを使用せずに floats をクリアする方法としてすでによく知られています。この記事では、必要な CSS の量をさらに削減できる最適化ソリューションを提供します。

Demo: Micro clearfix hack
Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

micro clearfix は、Thierry Koblentz の「clearfix reloaded」に基づいて最適化されており、最新のブラウザに適しています。

以下は、

.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

「micro clearfix」が

疑似クラス 要素を生成するコード スニペットです。これは、:before 擬似クラスが上部マージンの折り畳みを防止し、:after 擬似クラスが匿名テーブルセルを作成して新しい BFC を生成することを意味します。クラスはフロートをクリアするために使用されます。利点は、生成されたコンテンツを非表示にする必要がなく、必要な CSS コードが少ないことです。フロートをクリアするために :before セレクターを追加する必要はありません。 :before は上マージンの折りたたみを防ぐことができ、これには 2 つの利点があります:

BFC を使用してフロートをクリアする他の方法と同様に、overflow:hidden を使用する場合、視覚的な一貫性が確保されます

• ズームを使用する場合: IE 6/7 では、視覚的な一貫性が確保されています

  注意: はい 詳細については、IE 6/7 のフローティング要素の下マージンは新しい BFC に含まれません。詳細については、こちらを参照してください: フローティング要素の改善。 CSS 式を使用する IE
content:" "Opera のバグを修正しました。要素内に contenteditable 属性が同時に表示される場合、このバグにより要素の周囲にスペースが生成されてクリアされます。 font:0/0 を使用する a. このバグをテストしてくれた Sergio Cerrutti に感謝します

• 
  【関連する推奨事項】
  無料の CSS オンライン ビデオ チュートリアル

3. .

php.cn Dugu Jiijian (2) - CSS ビデオ チュートリアル

以上がフロートを解消するための最適化計画を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。