CSS クリアフロートクリア:both サンプルコード

CSS クリアフロートクリア:both サンプルコード

今日はフロートのクリアについてお話します。フロートのクリアについてお話する前に、フロートとは何かを理解する必要があります。ここではフロートの詳しい説明はしません。
フローティングとは、ドキュメント フローから外れていることを意味します。ドキュメント フローから外れると、親の幅と高さを子で引き伸ばすことができないため、フローティングについて理解する必要があります。さっそく、コードを見てみましょう。

<!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 自動マウント サービスのインストールと構成

推薦する

JavaScript における Arguments オブジェクトの使用に関する詳細な説明

目次序文議論の基本概念議論の役割実パラメータと仮パラメータの数を取得する実際のパラメータ値を変更する...

Docker Composeを使用してDOCleverをインストールする詳細なプロセスを説明します

目次1. Docker Composeとは何か、インストールして使用する方法2. DOCleverと...

js は丸で囲まれた数字のリストのサンプルコードを動的に追加します

1. まず本文にulタグを追加します <!-- 順序なしリスト --> <ul i...

MySQLの高可用性と高パフォーマンスのクラスタを構築する方法

目次MySQL NDB Clusterとはクラスター構築のための準備作業クラスターのデプロイを開始す...

dockerコンテナにvimをインストールするソリューション

目次物語の始まりvimをインストールし、hadoop-hive.envを編集します。不注意で回避しま...

PC/Pad/Phoneデバイスに自動的に適応するCSSウェブページレスポンシブレイアウト

序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...

Ubuntu 20.04でLNMP環境を構築する方法

簡単な説明以前 Centos7 で構築し、その後個人開発環境として Ubuntu 20.04 を使っ...

MySQL 5.7 生成列の使用例の分析

この記事では、例を使用して、MySQL 5.7 で生成された列の使用方法を説明します。ご参考までに、...

@font-face を使用して Web ページに特殊文字を実装する (カスタム フォントを作成する)

数日前、CSS を使用して三角形の矢印を実装する方法について記事を書きました。 目的の効果は達成され...

HTML&CSS&JS 互換性ツリー (IE、Firefox、Chrome)

Web デザインにおけるツリーとは何ですか?簡単に言うと、リンクをクリックするとサブディレクトリが展...

MySQLからHiveにさらにデータをインポートするためのソリューション

元の派生コマンド: bin/sqoop インポート -connect jdbc:mysql://19...

Linux での一般的なシェル スクリプト コマンドと関連知識

目次1. 覚えておくべき知識1. 変数タイプ2. シェル変数の説明3. シングルクォート、ダブルクォ...

React Native が「NSArray<id<RCTBridgeModule>>型のパラメータを初期化できません」というエラーを報告する (解決方法)

最近、古い RN プロジェクトを Xcode で実行すると、次のコード エラーが報告されました。 &...

どのような種類の MYSQL 接続クエリを知っていますか?

序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...

HTMLはBaidu百科事典のナビゲーションドロップダウンメニュー機能を模倣します

HTML は、Baidu 百科事典のナビゲーション ドロップダウン メニュー機能を模倣します。具体的...