今日はフロートのクリアについてお話します。フロートのクリアについてお話する前に、フロートとは何かを理解する必要があります。ここではフロートの詳しい説明はしません。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <スタイル> *{ マージン: 0; パディング: 0; } 。箱{ 幅: 1000ピクセル; マージン: 0 自動; 境界線: 8px 黒一色; } .box::after{ コンテンツ: ""; クリア: 両方; 表示: ブロック; } .box .left{ 幅: 50%; 高さ: 300px; 背景色: 赤; フロート: 左; } .box .right{ 幅: 50%; 高さ: 300px; 背景色: 青; フロート: 右; } </スタイル> </head> <本文> <div class="box"> <div class="left"></div> <div class="right"></div> </div> </本文> </html> ここから、フローティングを使用すると、親の幅と高さを子で引き伸ばすことができないため、レイアウトが想像したものと異なることがわかります。ここには多くの解決策があります。 最初のもの: 親要素にdivを追加し、追加されたdivのフロートをクリアします。 <div class="clear"></div> クリア{ クリア: 両方; } 2番目のタイプ: 親 div の高さを設定することもできます。 。箱{ 幅: 1000ピクセル; 高さ: 300px; マージン: 0 自動; 境界線: 8px 黒一色; } 3番目 親に overflow:hidden; 属性を追加することもできます。これも機能します。 。箱{ オーバーフロー: 非表示; 幅: 1000ピクセル; マージン: 0 自動; 境界線: 8px 黒一色; } 4番目 フローティングをクリアするには、position: absolute または display: inline-block を使用できます。 。箱{ /* 位置: 絶対; */ 表示: インラインブロック; 幅: 1000ピクセル; マージン: 0 自動; 境界線: 8px 黒一色; } 実は、他の 4 つのタイプを知っていれば十分ですが、5 番目のタイプの使い方を知っておく必要があります。他の 4 つのタイプはフローティング要素をクリアできますが、不要なトラブルを引き起こします。2 番目のタイプを例に挙げてみましょう。親が後で子要素を追加する必要がある場合、親の高さも変更する必要があり、多くのトラブルが発生します。5 番目のタイプは最も実用的なタイプでもあります。 5番目 疑似要素を使用してフロートをクリアします。親に疑似要素を追加できます。 .box::after{ コンテンツ: ""; クリア: 両方; 表示: ブロック; } CSS clear float clear:both のサンプルコードに関するこの記事はこれで終わりです。CSS clear both によるフローティングコンテンツのクリアに関する関連記事については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: JSはclip-pathを使用して動的領域クリッピング機能を実装します
>>: Linux システム AutoFs 自動マウント サービスのインストールと構成
目次序文議論の基本概念議論の役割実パラメータと仮パラメータの数を取得する実際のパラメータ値を変更する...
目次1. Docker Composeとは何か、インストールして使用する方法2. DOCleverと...
1. まず本文にulタグを追加します <!-- 順序なしリスト --> <ul i...
目次MySQL NDB Clusterとはクラスター構築のための準備作業クラスターのデプロイを開始す...
目次物語の始まりvimをインストールし、hadoop-hive.envを編集します。不注意で回避しま...
序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...
簡単な説明以前 Centos7 で構築し、その後個人開発環境として Ubuntu 20.04 を使っ...
この記事では、例を使用して、MySQL 5.7 で生成された列の使用方法を説明します。ご参考までに、...
数日前、CSS を使用して三角形の矢印を実装する方法について記事を書きました。 目的の効果は達成され...
Web デザインにおけるツリーとは何ですか?簡単に言うと、リンクをクリックするとサブディレクトリが展...
元の派生コマンド: bin/sqoop インポート -connect jdbc:mysql://19...
目次1. 覚えておくべき知識1. 変数タイプ2. シェル変数の説明3. シングルクォート、ダブルクォ...
最近、古い RN プロジェクトを Xcode で実行すると、次のコード エラーが報告されました。 &...
序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...
HTML は、Baidu 百科事典のナビゲーション ドロップダウン メニュー機能を模倣します。具体的...