ホームページ > 記事 > ウェブフロントエンド > CSS を使用してフローティングの Clearfix と Clear をクリアする方法についての簡単な説明
以下のエディターでは、CSS クリアフロート (clearfix および clear) の使用について簡単に説明します。編集者はこれがとても良いと思ったので、参考として共有します。エディターと一緒に見に来てください
この記事では、cssを理解し始めたばかりの子供向けに、htmlでのclearfixとclearの使い方を主に説明します。ここではclearfixとclearのスタイルについては書きません。
これら 2 つのクラスの使用法について説明しましょう。まず、例を見てみましょう:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>如何在html中使用clearfix和clear</title> <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/> <style type="text/css"> .fl{float:left;} .demo{background:#ccc;} .item1{background:#f90;height:100px;width:100px;} .item2{background:#fc0;height:200px;width:100px;} </style> </head> <body> <p class="demo"> <p class="fl item1"></p> <p class="fl item2"></p> </p> </body> </html>
float を使用すると、多くの未知の問題が発生することは誰もが知っています。上記の例を通じて、class="demo の高さを見つけることができます。 " 内部の p によって引き伸ばされません。これは、内部の p が浮いて文書から離れるためです。デモ自体には高さがないため、灰色の背景は見えません。もちろん、デモに高さを与えるだけですが、これはこの記事の目的から逸脱します (外側の p の高さを内部のコンテンツによって決定したい場合があります)。
フローティングによって引き起こされる問題なので、フローティングをクリアするだけです。専門家は、overflow:hidden など、フローティングをクリアするための多くの方法を持っていると思います。以下にclearfixとclearを使ってfloatをクリアする方法を紹介します。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>如何在html中使用clearfix和clear</title> <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/> <style type="text/css"> .fl{float:left;} .demo{background:#ccc;} .item1{background:#f90;height:100px;width:100px;} .item2{background:#fc0;height:200px;width:100px;} </style> </head> <body> <h2>用 clear 清除浮动</h2> <p class="demo"> <p class="fl item1"></p> <p class="fl item2"></p> <p class="clear"></p> </p> <h2>用 clearfix 清除浮动</h2> <p class="clearfix demo"> <p class="fl item1"></p> <p class="fl item2"></p> </p> </body> </html>
clearfixは主にフローティングレイヤーの親レイヤーで使用され、clearは主にフローティングレイヤーとフローティングレイヤーの間で使用され、フローティングレイヤーと同じレベルにあることがわかりました。親レイヤーの高さを拡張したい場合は、クリアを最後に入れるだけです。
これら 2 つの方法のどちらが優れているかを言うのは難しいですが、特定のニーズを詳細に処理する必要があるとしか言えません。
関連記事:
CSSのclearfixクリアフローティングメソッドについて
最も包括的なcssのclearfixクリアフローティングメソッド
以上がCSS を使用してフローティングの Clearfix と Clear をクリアする方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。