1. 原因: サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のドキュメントフローから外れているために親ボックスの高さをサポートできず、 2. 解決策:
(1)親ボックスの高さを固定する 親ボックスの高さを固定すると、一時的に問題は解決しますが、柔軟性がありません。将来、子ボックスの高さ要件が (Web ページの多くの場所で) 変更された場合、親ボックスの高さを手動で変更する必要があります。後からメンテナンスするのは簡単ではありません。 用途: 固定ナビゲーション バーなど、Web ページ内のボックスの固定高さ領域。 デメリット: 柔軟性に欠け、後でメンテナンスが困難 (2)内壁工法 フローティング要素の後に空のブロックレベル要素 (通常は div) を追加し、その要素に コードは次のとおりです。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>フローティング要素は破壊的である</title> <スタイル タイプ="text/css"> 。父親{ 境界線: 1px 実線の赤; } 。子供{ 幅: 200ピクセル; 高さ: 200px; フロート: 左; 背景色: 緑; } .clearfix{ クリア: 両方; } </スタイル> </head> <本文> <div class="父"> <div class="child">息子</div> <div class="clearfix"></div> </div> </本文> </html> アプリケーション: Web ページには多くのアプリケーションはなく、フローティングをクリアするための次の方法をガイドするだけです。 デメリット: 構造上の冗長性 (3)擬似要素除去法 内壁方式では、フローティング要素の後に空のブロックレベル要素 (通常は div) を追加し、その要素に 実は、CSS3 属性の使用法には、この使用法に完全に適合するセレクター、疑似要素セレクターが存在します。これは擬似クラスに似ており、擬似要素にはセレクターが追加されていますが、特別な状態を記述する代わりに、要素の特定の部分のスタイル設定を許可します。 これは、p タグ要素の末尾にスタイルを追加することを意味し、これは内壁方式の使用法にも準拠します。 コードは次のとおりです。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>フローティング要素は破壊的である</title> <スタイル タイプ="text/css"> 。父親{ 境界線: 1px 実線の赤; } 。子供{ 幅: 200ピクセル; 高さ: 200px; フロート: 左; 背景色: 緑; } .cleafix:後{ コンテンツ:'。'; 表示: ブロック; クリア: 両方; オーバーフロー: 非表示; 高さ: 0; } </スタイル> </head> <本文> <div class="父クリアフィックス"> <div class="child">息子</div> </div> </本文> </html> 将来的にフロートをクリアする必要がある場合は、タグに「clearfix」クラスを追加するだけです。非常に便利で迅速です。 疑似要素の削除方法の説明: .clearfix:後{ content:''; は、.clearfix 要素にコンテンツを追加することを意味し、コンテンツはインライン要素です。 display: block; は、要素をブロックレベル要素に設定し、内壁法の要件に準拠します。 (テーブルもブロックレベル要素であるため、いくつかの場所ではテーブルが使用されています) clear: both; フロートをクリアするメソッド。 overflow: hidden; と記述する必要があります。display:none; を使用する場合、要素はブロックレベル要素にはなりません。 overflow:hidden; は非表示の要素を意味しますが、要素はスペースを占有します。一方、display:none; はスペースを占有しません。 高さ: 0; } :after (疑似クラス) と ::after (疑似要素) の違いは次のとおりです。 類似点
違い
知らせ
(4)オーバーフロー:非表示 overflow CSS プロパティは、要素のコンテンツが大きすぎてボックスに収まらない場合にどうするかを定義します。これは、overflow-x および overflow-y の短縮プロパティです。 overflow プロパティは上記の効果を実現できるだけでなく、要素に overflow:hidden|auto|scroll プロパティが設定されている場合は、 BFC は単なるルールです。フローティングポジショニングに重要です。フロートの配置とクリアは、同じ BFC 内の要素にのみ適用されます。 フローティングは他の BFC 内の要素のレイアウトには影響しませんが、フロートをクリアすると、同じ BFC 内のその前にある要素のフロートのみがクリアされます。 利点: 簡潔なコード デメリット:コンテンツが増えると、自動行折り返しの失敗によりコンテンツが隠れてしまうことが発生しやすく、溢れた要素を表示できません。 要約: 親ボックスが BFC の領域を形成するようにすれば、その領域内のフローティング要素の影響は自動的にクリアされます。 BFC エリアを形成するもの: これで、CSS レイアウトのフローティングの問題に対する 4 つの解決策に関するこの記事は終了です。CSS レイアウトのフローティングに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: CSS の位置属性 (absolute|relative|static|fixed) の概要と応用
>>: Javascript イベントキャプチャとバブリングメソッドの詳細な説明
マインドマップ彼はおそらく次のように見えるでしょう: インターネット上の実装のほとんどは d3.js...
この記事では、参考までに、簡単な抽選機能を実装するためのjsの具体的なコードを共有します。具体的な内...
1. コマンドの紹介chkconfig コマンドは、システム サービスの実行レベル情報を更新および照...
私たち謙虚なプログラマーは、今でもこう歌わなければなりません。「あなたも私も、この世に生まれて、一日...
CentOS の紹介CentOS は、Red Hat Linux が提供する無料で利用できるソースコ...
vue+element UI は Excel データをエクスポートするためのパブリック関数をカプセル...
Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...
設定する前に、次の操作を行う必要があります。 1. まずjdk bloggerをインストールします。...
目次前面に書かれた要件分析 v1アイデア1: インターセプションメソッドを使用して入力ボックスの入力...
目次1. オペレーティングシステムとは何か2. Linuxの起源3. Linuxの基本機能4. Li...
MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...
1行のコマンド docker run -d \ -v /share:/home/vsftpd \ -...
毎日サービスをチェックしているときに、portainer からコンテナ ログを確認しようとしたところ...
目次1つ。環境二。予防三つ。例Zabbix トリガーがしきい値に達すると、アラート メッセージの送信...
インストール環境: CAT /etc/os-release CentOS システムのバージョン情報を...