CSS 属性値 clear:right が機能しない理由の詳細

CSS 属性値 clear:right が機能しない理由の詳細
clear プロパティを使用してフロートをクリアすることはよくあることであり、clear プロパティの定義はよく知られているかもしれません。
たとえば、clear:left は左側のフローティング要素をクリアします。サンプルコードは次のとおりです。

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

コードを表示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>アリ族</title>
<スタイル タイプ="text/css">
。初め
{
幅:100ピクセル;
高さ:100px;
border:1px 赤一色;
フロート:左;
}
。2番
{
幅:100ピクセル;
高さ:100px;
border:1px 青一色;
フロート:左;
}
。三番目
{
幅:100ピクセル;
高さ:100px;
border:1px 緑一色;
フロート:左;
クリア:左;
}
</スタイル>
</head>
<本文>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</本文>
</html>

上記のコードから、3 番目の div の clear:left 属性が使用され、要素が折り返されていることがわかります。ただし、clear:right 属性を使用すると機能しない可能性があります。サンプルコードは次のとおりです。

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

コードを表示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>アリ族</title>
<スタイル タイプ="text/css">
。初め
{
幅:100ピクセル;
高さ:100px;
border:1px 赤一色;
フロート:左;
}
。2番
{
幅:100ピクセル;
高さ:100px;
border:1px 青一色;
フロート:左;
クリア:右;
}
。三番目
{
幅:100ピクセル;
高さ:100px;
border:1px 緑一色;
フロート:左;
}
</スタイル>
</head>
<本文>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</本文>
</html>

上記のコードの 2 番目の div には clear:right コードがありますが、その右側にフローティング要素がまだ表示されます。このメイン コードは順番に実行されます。2 番目の div が実行されて右側のフロートがクリアされると、3 番目の div がロードされていないため、そのクリア効果は無効になり、3 番目の div は 2 番目の div の後を追うことになります。

<<:  JavaScript 高度なカスタム例外

>>:  ウェブサイトでページコンテンツや情報を直接コピーできない問題を解決する方法

推薦する

VirtualBox CentOS7.7.1908 Python3.8 ビルド Scrapy 開発環境 [グラフィックチュートリアル]

目次環境CentOSをインストールするyum 国内ミラーソースを構成するサードパーティの依存関係をイ...

JavaScript の for ループと二重 for ループの詳細な説明

forループfor ループは配列の要素をループします。文法: for (初期化変数; 条件式; 繰り...

MySQL サービス 1067 エラーの解決策: mysql 実行可能ファイルのパスを変更する

今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...

Vue バインディング オブジェクト、配列データを動的にレンダリングできないケースの詳細な説明

プロジェクトシナリオ: Dark Horse Vueプロジェクト管理の実践、製品分類の取得、拡張バー...

zabbix を使用して ogg プロセスを監視する (Linux プラットフォーム)

以前作成されたデータベースの ogg プロセスは、発見されるまでの約半月間ダウンしていました。起動で...

6ull が Linux ドライバ モジュールをロードできない問題の解決方法

目次0x01 ドライバーモジュールのロードに失敗しました0x02 ソリューション要約する0x01 ド...

MySQLデータベースの数千万件のデータクエリとストレージの詳細な説明

目次百万レベルのデータ処理ソリューションデータストレージ構造設計クエリステートメントの最適化1000...

JavaScript マウスイベントのケーススタディ

マウスイベントマウスが特定の操作を実行すると、イベント オブジェクトが生成され、イベントがトリガーさ...

HttpsページでBaiduシェアを使用するためのソリューション

サイト全体で https アクセスを有効にしてから、共有コードが利用できなくなり、有効になっていた小...

DockerはCMDまたはENTRYPOINTコマンドを使用して複数のサービスを同時に起動します

要件: Celery は Django に導入されています。Django プロジェクトを開始するとき...

jsを使用してカルーセル効果を実現する

今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...

Vue Nativeを使用したモバイルアプリケーションの構築プロセスの完全な記録

目次序文Vue Nativeの機能宣言的レンダリング双方向バインディングVue.js エコシステムの...

MySQL-8.0.26 構成グラフィックチュートリアル

はじめに: 最近、会社のプロジェクトでデータベースのバージョンが変更されました。ここでは、MySQL...

MySQL初心者のための基本操作のまとめ

図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...

Linux userdel コマンドの使用法

1. コマンドの紹介userdel (ユーザー削除) コマンドは、ユーザー アカウントと関連ファイル...