この記事では、CSS を理解し始めたばかりの人を対象に、主に HTML で clearfix と clear を使用する方法について説明します。ここでは、clearfix と clear のスタイルについては書きません。 これら 2 つのクラスの使用法について説明します。まず、例を見てみましょう。 コードをコピー コードは次のとおりです。<!DOCTYPE HTML> <html lang="ja-JP"> <ヘッド> <メタ文字セット="UTF-8"/> <title>HTML で clearfix と clear を使用する方法</title> <link rel="スタイルシート" type="text/css" href="/css/base.css" media="all"/> <スタイル タイプ="text/css"> .fl{float:left;} .demo{背景:#ccc;} .item1{背景:#f90;高さ:100px;幅:100px;} .item2{背景:#fc0;高さ:200px;幅:100px;} </スタイル> </head> <本文> <div class="demo"> <div class="fl item1"></div> <div class="fl item2"></div> </div> </本文> </html> フロートを使用すると多くの未知の問題が発生することは誰もが知っています。上記の例から、class="demo" の高さは内部の div によって引き伸ばされていないことがわかります。これは、内部の div がフロートしてドキュメントから外れているためです。demo 自体には高さがないため、灰色の背景は見えません。もちろん、デモに高さを指定することもできますが、それはこの記事の目的から外れます (外側の div の高さを内部のコンテンツによって決定したい場合があります)。 問題はフローティングによって発生しているため、フローティングをクリアするだけで済みます。専門家は、overflow:hidden など、フローティングをクリアする方法を多数持っていると思います。次に、clearfix と clear を使用してフロートをクリアする方法を紹介します。 コードをコピー コードは次のとおりです。<!DOCTYPE HTML> <html lang="ja-JP"> <ヘッド> <メタ文字セット="UTF-8"/> <title>HTML で clearfix と clear を使用する方法</title> <link rel="スタイルシート" type="text/css" href="/css/base.css" media="all"/> <スタイル タイプ="text/css"> .fl{float:left;} .demo{背景:#ccc;} .item1{背景:#f90;高さ:100px;幅:100px;} .item2{背景:#fc0;高さ:200px;幅:100px;} </スタイル> </head> <本文> <h2>フロートをクリアするには clear を使用します</h2> <div class="demo"> <div class="fl item1"></div> <div class="fl item2"></div> <div class="clear"></div> </div> <h2>clearfix でフロートをクリアする</h2> <div class="clearfix デモ"> <div class="fl item1"></div> <div class="fl item2"></div> </div> </本文> </html> clearfix は主にフローティング レイヤーの親レイヤーで使用され、clear は主にフローティング レイヤー間およびフローティング レイヤーと同じレベルで使用されていることがわかりました。親レイヤーの高さを拡張する場合は、clear を最後に配置する必要があります。 これら 2 つの方法のどちらが優れているかは、一概には言えません。特定のニーズを満たす必要があるということしか言えません。 このように clearfix スタイルで記述するとなぜフロートがクリアされるのかと疑問に思う人もいるかもしれません。これらのスタイルは何を意味していますか?これには、学生がCSS疑似クラスについてある程度理解していることが求められる。 |
<<: HTML でハイパーリンク タグを使用するチュートリアル
>>: CSS3 を使用してピカチュウのアニメーション壁紙を作成する例
1. ASP.NET Web アプリケーションのテンプレートとは何ですか? それらの違いは何ですか?...
序文:私は仕事柄、オンラインライブストリーミングの分野に携わっており、ビデオの再生やダウンロードには...
CSS では、要素タグは、要素の表示モードの違いに応じて、インラインレベル要素とブロックレベル要素の...
序文現在、プロジェクトでは、Axios ライブラリが HTTP インターフェース リクエストによく使...
画像の周囲にテキストを折り返すとは何ですか?これは次の図の効果です。 エフェクトのCSSコードはここ...
この記事では、スライダー検証コードを実装するためのJavaScriptの具体的なコードを参考までに共...
多くの場合、移行は避けられません。ハードウェアのアップグレード、データ センターの変更、古いオペレー...
xml <?xml バージョン="1.0" エンコーディング="...
Shell で受信パラメータを受信する方法は 2 つあることがわかっています。 1 つはスクリプト...
休憩中に、眠気を完全に吹き飛ばす電話がかかってきました。「開発者が更新 SQL を書くときに whe...
環境セントロス6.6 MySQL 5.7インストールシステムがインストールされている場合は、まずアン...
1. ソフトウェアのインストールパスを確認します。 Linuxソフトウェアをインストールできる場所は...
以前、私は自分で WordPress を構築していましたが、当時はサードパーティの仮想ホストを使用し...
まず、マージン崩壊が発生する 3 つの状況を見てみましょう。 1. 隣接する 2 つのブロックレベル...
目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...