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 を使用してピカチュウのアニメーション壁紙を作成する例

推薦する

Ubuntuサーバーの一般的なコマンドの概要

以下のコマンドのほとんどは、コンソール/ターミナル/シェルで入力する必要があります。 'su...

CocosCreator スケルトンアニメーション ドラゴンボーン

CocosCreator バージョン 2.3.4ドラゴンボーンアニメーションキールアニメーションを ...

RHCEはApacheをインストールし、ブラウザでIPにアクセスします

1. at は、5 時間後にルート ディレクトリの at_test ファイルに「これは at タスク...

Vueはページキャッシュ機能を実装する

この記事の例では、ページキャッシュ機能を実装するためのVueの具体的なコードを参考までに共有していま...

JavaScript配列の簡単な紹介

目次配列の紹介配列リテラル2次元配列要約する配列の紹介配列- Arrayもオブジェクトですこれは通常...

MySQL マスタースレーブ同期メカニズムと同期遅延問題追跡プロセス

序文DBA として、仕事中に MySQL マスターとスレーブの同期遅延の問題に遭遇することがよくあり...

HTML ページ共通スタイル (推奨)

以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピーbody、di...

Layuiテーブル行のデータを動的に編集する

目次序文スタイル機能説明初期化コードイベントリスナーの追加リスナーツールバーモニターテーブル行ツール...

MySQLの高可用性アーキテクチャの詳細な説明

目次導入MySQL 高可用性マスター 1 つとバックアップ 1 つ: MySQL マスター スレーブ...

CSS3 はアニメーション属性を使用してクールな効果を実現します (推奨)

animation-name アニメーション名。複数のアニメーションがバインドされていることを示す...

MySQL が my.cnf を読み込む順序の詳細

目次MySQLがmy.cnfを読み込む順序1. mysql.server の起動方法2. mysql...

Dockerを使用してOracle_11gをインストールする方法

DockerでOracle_11gをインストールする1. oracle_11gイメージを取得する d...

vue3 コンポーネントでの v-model の使用と詳細な説明

目次v-model 入力で双方向バインディングデータを使用するコンポーネント内の v-model他の...

macOS での MySQL 8.0.17 のインストールと簡単な設定チュートリアル

私が書いた内容が理解できない場合は、インターネット上に理解できるチュートリアルがない可能性があります...

VMware ESXi CLI の一般的なコマンドを調べる

目次【共通コマンド】 [一般的な esxi コマンドの概要] [esxcli コマンドの調査] ES...