clearfixとclearの例

この記事では、CSS を理解し始めたばかりの人を対象に、主に HTML で clearfix と clear を使用する方法について説明します。ここでは、clearfix と clear のスタイルについては書きません。

これら 2 つのクラスの使用法について説明します。まず、例を見てみましょう。

コードをコピー

コードは次のとおりです。

フロートを使用すると多くの未知の問題が発生することは誰もが知っています。上記の例から、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 を使用してピカチュウのアニメーション壁紙を作成する例