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

php中世界最好的语言
リリース: 2018-03-13 11:00:30
オリジナル
1749 人が閲覧しました

今回は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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!