clearfixとclearの例

clearfixとclearの例
この記事では、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 アプリケーションのテンプレートとは何ですか? それらの違いは何ですか?...

nginx proxy_cache キャッシュ設定の詳細な説明

序文:私は仕事柄、オンラインライブストリーミングの分野に携わっており、ビデオの再生やダウンロードには...

CSS における要素の表示モード

CSS では、要素タグは、要素の表示モードの違いに応じて、インラインレベル要素とブロックレベル要素の...

Vue で Axios カプセル化を使用するための完全なチュートリアル

序文現在、プロジェクトでは、Axios ライブラリが HTTP インターフェース リクエストによく使...

CSSはフロートをシミュレートして、画像の左右を囲む中央テキストの効果を実現します。

画像の周囲にテキストを折り返すとは何ですか?これは次の図の効果です。 エフェクトのCSSコードはここ...

スライダー検証コードを実装するJavaScript

この記事では、スライダー検証コードを実装するためのJavaScriptの具体的なコードを参考までに共...

Docker コンテナを他のサーバーに移行する 5 つの方法

多くの場合、移行は避けられません。ハードウェアのアップグレード、データ センターの変更、古いオペレー...

web.config (IIS) および .htaccess (Apache) の構成

xml <?xml バージョン="1.0" エンコーディング="...

1つのコマンドで、シェルの読み取りコマンドの共通パラメータを理解できます。

Shell で受信パラメータを受信する方法は 2 つあることがわかっています。 1 つはスクリプト...

単一のMySQLテーブルを復元する手順

休憩中に、眠気を完全に吹き飛ばす電話がかかってきました。「開発者が更新 SQL を書くときに whe...

Centos6にMysql5.7をインストールする方法

環境セントロス6.6 MySQL 5.7インストールシステムがインストールされている場合は、まずアン...

Linux ソフトウェアのインストール場所を確認する簡単な方法

1. ソフトウェアのインストールパスを確認します。 Linuxソフトウェアをインストールできる場所は...

Nginx で WordPress を設定する方法

以前、私は自分で WordPress を構築していましたが、当時はサードパーティの仮想ホストを使用し...

CSS のマージンの崩壊問題を解決する方法

まず、マージン崩壊が発生する 3 つの状況を見てみましょう。 1. 隣接する 2 つのブロックレベル...

フロントエンド HTML+CSS+JS を使用してシンプルな TODOLIST 関数を開発する (メモ帳)

目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...