ホームページ  >  記事  >  ウェブフロントエンド  >  CSS の Clearfix の原理を簡単に説明します。

CSS の Clearfix の原理を簡単に説明します。

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-08 16:10:032410ブラウズ

今回は、CSS における Clearfix の原理と、CSS で Clearfix を使用する際の 注意事項 について簡単に説明します。実際のケースを見てみましょう。

デモ

デモの CSS は次のようなスタイルを使用します:

.clearfix:after{  content: '';  display: block;  clear: both;

このスタイルでは、要素を選択した後に ::after セレクターを使用して、一重引用符で囲まれたコンテンツを挿入します。この例では、コンテンツは選択できません。中身は空です。この空の要素に clear:both を追加して、

明確にフローティングにします。コンテンツの最後に空の div を追加してから float をクリアすることと同じです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイト

その他の関連記事に注目してください。

関連書籍:

CSS セレクターに関する一般的な問題とは何ですか?

一般的な CSS スタイル

JS 関数の詳細な分析

CSS3 を使用してログイン ボックスを作成する方法

以上がCSS の Clearfix の原理を簡単に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。