Webページのレイアウト方法：クリアフローティング

今回はWebページのレイアウト方法の一つフロートのクリアと、フロートをクリアするための注意事項についてお届けします。

ボックスの高さ

1. 標準フローのボックスの高さはコンテンツの高さによってサポートできます
2. フローティング フローのフローティング コンテンツはボックスの高さをサポートできません。なぜフロートをクリアにする必要があるのでしょうか?

隣接するボックス間で、前のボックスに高さがない場合、後ろのボックスの浮動要素が前のボックスの浮動要素を探すことになり、インターフェイスで混乱が生じます。フロートをクリアする必要があります。

フロートをクリアする方法 1:

解決策:

前の親要素の高さを設定する

注:

エンタープライズ開発では、高さを記述せずに高さを記述することができるため、このメソッドはほとんど使用されません;

CSS:

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            height: 20px;  //给前面盒子设置高度
            background-color: red;
        }
        .box2{
            background-color: green;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }    </style>

body:

<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p></div><div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p>
</div>

float メソッド 2:

解決策:

バックボックスに clear:both 属性を追加します

clear 属性値:

none: デフォルト値、フローティング要素のソート規則に従ってソートします (左フローティングの場合は左フローティングを探し、右フローティングの場合は右フローティングを探します)

left: 前の左フローティング要素を検索しません (つまり、前の左浮動要素と同じ行)

右: 前の右浮動要素を検索しません
両方: 前の左浮動要素と右浮動要素を検索しません

注:

cle 属性を追加するとき要素に追加すると、この属性のマージン属性は無効になります。そのため、

CSS:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            border: 1px solid #000;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
            clear: both; //给后面的盒子添加clear:both;属性
            margin-top: 28px;
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }    </style>

の使用は推奨されません。

クリアフローティングメソッド 3:

解決策:

外壁メソッド: 追加のブロックレベル要素を追加します。フローティング サブ要素を持つ 2 つのボックスの間に; そして、clear: Both; 属性を設定します。

注:

外壁メソッドでは、2 番目のボックスで margin-top 属性を使用できます。

margin-bottom

属性を使用するにはボックスを使用します。
ただし、追加のラベルの高さを設定することでマージン効果を実現できます。この技術は Sohu で広く使用されていますが、無意味なラベルを大量に追加する必要があるためお勧めできません。タグ;
CSS:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;            /*margin-bottom: 10px;*/ //外墙法不可以让第一个盒子使用margin-bottom属性,
        }
        .box2{
            background-color: green;            /*margin-top: 10px;*/  //外墙法它可以让第二个盒子使用margin-top属性,
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float: left;
        }
        .wall{
            clear: both; //设置clear: both;属性;
        }
        .h20{
            height: 20px; //设置额外标签的高度来实现margin效果;
            background-color: skyblue;
        }
    </style>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p></div><div class="wall h20"></div> //外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;<div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p></div>

クリアフローティングメソッド 4:

ソリューション:

内壁メソッド:

1 in 最初のボックスのすべての子要素は、最後に追加のブロックレベル要素を追加します

2 クリアを設定します。 ; この追加のブロックレベル要素の属性

注:

内壁メソッドは 2 番目のボックスを作成できます

最初のボックスが margin-bottom 属性を使用できるようにする内壁メソッド

<a>内墙法会自动撑起盒子的高度,所以可以直接设置margin属性</a>

とは外壁工法と内壁工法の違いは？

外壁工法は1段目のボックスの高さに対応できませんが、内壁工法は1段目のボックスの高さに対応できます。最初のボックス

エンタープライズ開発では、フローティングを解消するためにパーティションメソッドは一般的に使用されません（パーティションウォールメソッド：外壁メソッドと内壁メソッド）

CSS :

   <style>
        *{            margin: 0;            padding: 0;
        }        .box1{            background-color: red;            /*margin-bottom: 10px;*/
        }        .box2{            background-color: green;            /*margin-top: 10px;*/
        }        .box1 p{            width: 100px;            background-color: blue;
        }        .box2 p{            width: 100px;            background-color: yellow;
        }        p{            float: left;
        }        .wall{            clear: both;
        }        .h20{            height: 20px;            background-color: skyblue;
        }    </style></head>
<div class="box1">
    <p>我是文字1</p>
    <p>我是文字1</p>
    <p>我是文字1</p>
    <div class="wall h20"></div> //设置内墙</div><div class="box2">
    <p>我是文字2</p>
    <p>我是文字2</p>
    <p>我是文字2</p></div>

事例を読んだ後、メソッドをマスターしたと思いますこの記事では、さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSSの背景とスプライト

CSS表示モードの使用方法

以上がWebページのレイアウト方法：クリアフローティングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。