この記事では、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 を使用してピカチュウのアニメーション壁紙を作成する例
以下のコマンドのほとんどは、コンソール/ターミナル/シェルで入力する必要があります。 'su...
CocosCreator バージョン 2.3.4ドラゴンボーンアニメーションキールアニメーションを ...
1. at は、5 時間後にルート ディレクトリの at_test ファイルに「これは at タスク...
この記事の例では、ページキャッシュ機能を実装するためのVueの具体的なコードを参考までに共有していま...
目次配列の紹介配列リテラル2次元配列要約する配列の紹介配列- Arrayもオブジェクトですこれは通常...
序文DBA として、仕事中に MySQL マスターとスレーブの同期遅延の問題に遭遇することがよくあり...
以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピーbody、di...
目次序文スタイル機能説明初期化コードイベントリスナーの追加リスナーツールバーモニターテーブル行ツール...
目次導入MySQL 高可用性マスター 1 つとバックアップ 1 つ: MySQL マスター スレーブ...
animation-name アニメーション名。複数のアニメーションがバインドされていることを示す...
目次MySQLがmy.cnfを読み込む順序1. mysql.server の起動方法2. mysql...
DockerでOracle_11gをインストールする1. oracle_11gイメージを取得する d...
目次v-model 入力で双方向バインディングデータを使用するコンポーネント内の v-model他の...
私が書いた内容が理解できない場合は、インターネット上に理解できるチュートリアルがない可能性があります...
目次【共通コマンド】 [一般的な esxi コマンドの概要] [esxcli コマンドの調査] ES...