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 の後を追うことになります。 |
>>: ウェブサイトでページコンテンツや情報を直接コピーできない問題を解決する方法
目次環境CentOSをインストールするyum 国内ミラーソースを構成するサードパーティの依存関係をイ...
forループfor ループは配列の要素をループします。文法: for (初期化変数; 条件式; 繰り...
今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...
プロジェクトシナリオ: Dark Horse Vueプロジェクト管理の実践、製品分類の取得、拡張バー...
以前作成されたデータベースの ogg プロセスは、発見されるまでの約半月間ダウンしていました。起動で...
目次0x01 ドライバーモジュールのロードに失敗しました0x02 ソリューション要約する0x01 ド...
目次百万レベルのデータ処理ソリューションデータストレージ構造設計クエリステートメントの最適化1000...
マウスイベントマウスが特定の操作を実行すると、イベント オブジェクトが生成され、イベントがトリガーさ...
サイト全体で https アクセスを有効にしてから、共有コードが利用できなくなり、有効になっていた小...
要件: Celery は Django に導入されています。Django プロジェクトを開始するとき...
今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...
目次序文Vue Nativeの機能宣言的レンダリング双方向バインディングVue.js エコシステムの...
はじめに: 最近、会社のプロジェクトでデータベースのバージョンが変更されました。ここでは、MySQL...
図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...
1. コマンドの紹介userdel (ユーザー削除) コマンドは、ユーザー アカウントと関連ファイル...