流動的な理解と実践

1. CSS レイアウトの 3 つのメカニズム:

Web ページのレイアウトの中核は、CSS を使用してボックスを配置することです。

CSS には、通常のフロー、フロート、位置という 3 つの従来のレイアウトスタイルがあります。

通常のフロー: 標準フローまたはドキュメントフローとも呼ばれます。通常のフローのタグは、指定されたデフォルトの方法に従って配置されます。ブロックレベル要素は 1 行を占め、上から下に配置されます。インライン要素は左から右に配置され、端に達すると自動的に折り返されます。親要素。

フロート: 要素のデフォルトの配置を変更して、ボックスを通常のフローから浮かせることができます。主なことは、複数のブロックレベルの要素を 1 行に水平に配置することです。

配置: ブラウザウィンドウ内の特定の位置にボックスを配置します。

2. なぜフロートが必要なのでしょうか?

実際のレイアウトで次の問題が発生した場合:

ブロックレベルのボックスを横一列に並べるにはどうすればよいでしょうか?

ブロックレベルのボックスを左右に揃えるにはどうすればよいですか?

明らかに、標準ストリームのレイアウト方法は機能しません。標準のフローではニーズを満たすことができないため、この種の Web ページレイアウトの問題を解決するにはフローティングを使用する必要があります。

3. フロートとは何ですか?

フローティングとは、要素にフローティング属性を設定した後、標準フローの制御から離脱し、要素を指定された位置に移動させることを意味します。

4. フローティングの役割:

ブロックレベルのボックスを 1 行に水平に表示します。

ボックスの左右の位置合わせが可能です。

フローティングでは、画像を制御して、画像の周囲にテキストが回り込む効果を実現することもできます。

5. 文法:

セレクター {float: 属性値;}

float には 3 つの属性値があります: デフォルトは none で、要素は浮動しません。left は左に浮動するように設定され、right は右に浮動するように設定されます。

6. 特徴:

①フローティングに設定されたエレメントは、定位置を占有せずに通常の流量の上に浮き、標準流量から逸脱することを「適応外」と呼びます。

<div class="one">1</div>
<div class="two">2</div>

    .one {
      width: 100px;
      height: 100px;
      background-color: pink;
      float: left;
    }

    .two {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

ボックス 1 がフローティングに設定されている場合、通常のフローではボックス 2 の上にボックス 1 が浮かび上がり、フローティングボックス 1 はその位置を占めなくなります。

②フローティング要素が近接しており、親ボックスがフローティングサブボックスを保持できない場合、余分なサブボックスは別の行に配置されます。

  <div class="father">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="four">4</div>
  </div>

<style>
    .father {
      width: 450px;
      height: 450px;
      background-color: blanchedalmond;
    }
    .one,
    .two,
    .three,
    .four {
      width: 140px;
      height: 140px;
      float: left;
    }
    .one {
      background-color: pink;
    }
    .two {
      background-color: skyblue;
    }
    .three {
      background-color: greenyellow;
    }
    .four {
      background-color: orange;
    }
  </style>

ボックス 1、2、3、および 4 にはすべてフロートがあり、水平方向に隣接します。親ボックスの幅は 4 番目のボックスには十分ではないため、ボックス 4 は別の行に配置されます。

サブボックスにdisplay: inline-blockを設定すると、サブボックスを横一列に並べることもできますが、そうするとボックス間に隙間ができてしまいます。ボックスはフロートのように互いに接近していません。

③フローティングは現在以降の標準フローの要素にのみ影響し、フローティング前の標準フローの要素には影響しません。

7.クリアフローティング：

7.1 なぜフロートをクリアするのですか?

親ボックス内に子要素が多く、親ボックスの高さを指定するのが難しい場合があるため、子要素の内容を親ボックスの高さに対応させたい。ただし、子要素が float に設定されている場合、標準のフローから外れ、親要素の高さをサポートしないため、親要素の高さは 0 になります。

7.2 フローティングの本質を明確にする:

子要素のフローティングにより親要素の高さが0になってしまう問題を解決するためです。フロートをクリアすると、親要素はフロートされた子要素に従って高さを自動的に検出します。親ボックスの高さは、背後にある標準フローの要素には影響しません。

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

①追加ラベル方式（隔壁方式）：最後のフローティング要素の後にラベルを追加（W3C推奨実践）

<div class="two" style="clear:both"></div>

欠点: 意味のないタグが多数追加される、構造が貧弱になる

② 親にオーバーフローを追加: 属性を非表示、自動、またはスクロールに設定します。

    .father {
      width: 450px;
      height: 450px;
      background-color: blanchedalmond;
      overflow: hidden;
    }

デメリット: コンテンツが非表示になり、はみ出した部分を表示できません

③ 擬似要素の後に親: に追加:

追加ラベルのアップグレードは、ボックスの背面に新しいボックスを追加することに相当します。

    .clearfix:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    .clearfix {
      /* IE6、7 专有 */
      *zoom: 1;
    }

利点: 新しいタグの追加がなく、構造がシンプル

短所: バージョンの低いブラウザに注意する必要がある

④ 二重の疑似要素を親に追加します。

    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }

長所: コードがより簡潔になる