2014 年以降に CSS Float を最適にクリアするにはどうすればよいですか?

CSS Float のクリア: ベスト プラクティス

CSS float を効果的にクリアするという問題は、時間の経過とともに進化し、さまざまな手法が登場してきました。
の使用は一般的な方法ですが、現在のベスト プラクティスと一致していない可能性があります。

最新のアプローチ:

2014 年に、Clearfix テクニックを利用した擬似要素を推奨します。この方法には、次の CSS を適用することが含まれます:

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

この手法は最新のブラウザーで機能します。さらに最適化するには、Nicholas Gallagher が考案した micro Clearfix を使用できます:

.cf {
    *zoom: 1;
}

オリジナルのソリューション:

不要なものを避けたい人に好まれる代替ソリューションマークアップでは、親要素で overflow: hidden または overflow: auto を使用します。これにより、追加の要素を必要とせずに、ブラウザ間でフロートを効果的にクリアできます。

概要:

2014 年、フロートをクリアするための推奨方法は、疑似要素を使用した clearfix 手法になりました。ブラウザに依存しない方法で。ただし、オーバーフロー方式は、マークアップの最小化を優先する人にとっては依然として実行可能なオプションです。

以上が2014 年以降に CSS Float を最適にクリアするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。