CSS フローティングの詳細: シナリオ、ケース、エラーが発生しやすいポイント、およびフローティングのクリア

フロートとレイアウト

フローティングの本来の目的は、組版の問題を解決すること、つまりテキストを画像で囲む効果を実現することですが、Web の初期には優れたレイアウトツールがなかったため、フローティングはレイアウトツールとして広く使用されています: (画像 1 より⁾ )

画像の説明を追加してください

オンラインの場合。

フローティングはすべてのフロントエンド担当者にとって必須のコースです。私のフロントエンドの最初のレッスンは、フローティングアニメーションカラーブロックを使用することです。Web ページ全体がカラフルなカラーブロックで埋め尽くされると、達成感を感じます。

画像の説明を追加してください

<style>
  .a {
      
      
    width: 1000px;
    height: 100px;
    background-color: oldlace;
  }

  .a1 {
      
      
    width: 150px;
    height: 100px;
    background-color: orange;
    float: left;
  }

  .a2 {
      
      
    width: 600px;
    height: 100px;
    background-color: peru;
    float: left;
  }

  .a3 {
      
      
    width: 100px;
    height: 100px;
    background-color: chocolate;
    float: right;
  }

  .b {
      
      
    width: 1000px;
    height: 300px;
    background-color: LightSalmon;
  }

  .c {
      
      
    width: 1000px;
    height: 300px;
    background-color: seashell;
  }

  .c1 {
      
      
    width: 250px;
    height: 150px;
    background-color: Coral;
    float: left;
  }

  .c2 {
      
      
    width: 250px;
    height: 150px;
    background-color: OrangeRed;
    float: left;
  }

  .c3 {
      
      
    width: 250px;
    height: 150px;
    background-color: DarkSalmon;
    float: left;
  }

  .c4 {
      
      
    width: 250px;
    height: 150px;
    background-color: Tomato;
    float: left;
  }

  .c5 {
      
      
    width: 250px;
    height: 150px;
    background-color: Salmon;
    float: left;
  }

  .c6 {
      
      
    width: 250px;
    height: 150px;
    background-color: Brown;
    float: left;
  }

  .c7 {
      
      
    width: 250px;
    height: 150px;
    background-color: LightCoral;
    float: left;
  }

  .c8 {
      
      
    width: 250px;
    height: 150px;
    background-color: RosyBrown;
    float: left;
  }
</style>

<div class="a">
  <div class="a1">LOGO</div>
  <div class="a2">导航</div>
  <div class="a3">注册登录</div>
</div>

<div class="b">大图</div>

<div class="c">
  <div class="c1">1</div>
  <div class="c2">2</div>
  <div class="c3">3</div>
  <div class="c4">4</div>
  <div class="c5">5</div>
  <div class="c6">6</div>
  <div class="c7">7</div>
  <div class="c8">8</div>
</div>

オンラインデモでは、コードをコピーしてローカルで開くことをお勧めします。効果はより優れています。

カラーブロックを描画する場合は、まずPSで幅と高さを計測し、次にCSSで高さ、幅、背景色、備考を記述します。名前はabcdefgに基づいています。描画が完了すると、Webページ全体がカラフルになります。、綺麗じゃないですか? ああ。

これがフローティングレイアウトです。

【ポイント】フローティングレイアウトのポイント：

まずデザイン案を分析し、Webページのコンテンツを大ブロックから小ブロックに分割します。
PS を使用して各ブロックの高さと幅を測定します。
CSS+float を使用して色のブロックをアニメーション化します。

フローティングレイアウトに関するよくある質問

**問題 1: 幅を超えています。**内容物がコンテナの幅を超えると、その後ろにある小さな箱が落ちます。

画像の説明を追加してください

<style>
  .a {
      
      
    width: 1000px;
    height: 100px;
    background-color: wheat;
  }

  .a1 {
      
      
    width: 300px;
    height: 100px;
    background-color: skyblue;
    float: left;
  }

  .a2 {
      
      
    width: 400px;
    height: 100px;
    background-color: cadetblue;
    float: left;
  }

  .a3 {
      
      
    width: 400px;
    height: 100px;
    background-color: steelblue;
    float: left;
  }
</style>
<div class="a">
  <div class="a1"></div>
  <div class="a2"></div>
  <div class="a3"></div>
</div>

オンラインの場合。

カラーブロックを描いたときに、特定のカラーブロックが落ちてしまった場合は、幅を測るときに少し測りすぎていることを意味します。確かに身長を測るときは、色のブロックが多いと目がぼやけるので間違いやすいですが、途中で休憩を多くしたり、硬直せず、体が重要です。

**質問2、消える箱の高さ。**一部の生徒は、カラーブロックを描くときに奇妙な現象を発見しました:
画像の説明を追加してください

<style>
  .a {
      
      
    width: 1000px;
    background-color: lavender;
  }

  .a1 {
      
      
    width: 500px;
    height: 100px;
    background-color: Indigo;
    float: left;
  }

  .a2 {
      
      
    width: 500px;
    height: 100px;
    background-color: Violet;
    float: left;
  }

  .b {
      
      
    width: 1000px;
    height: 300px;
    background-color: Purple;
  }
</style>

<div class="a">
  <div class="a1"></div>
  <div class="a2"></div>
</div>

<div class="b">大图</div>

オンラインの場合。

大きな画像のボックスは明らかに 300 ピクセルの高さに設定されていますが、なぜ 200 ピクセルしか残っていないのでしょうか? b ボックスの高さはどこへ、そしてその理由は何ですか? ? ? なぜ？? ?

[解釈] ボックス a に高さが設定されていないため、ボックス b が 100px 上に移動します。これは非常によくある間違いです。ボックスの高さを設定するのを忘れます。実際の開発プロセスでは、ボックスが多く、カラーブロックのヒントがないため、高さを忘れがちです。一般に、Web ページの文字と背景が分離する現象は、この種のエラーが原因であることがほとんどです。解決策は、高さを設定するか、フロートをクリアすることです。

【感想】 a の枠の下に「big pic」という 2 つの単語が表示されている生徒がいましたが、翻訳するとその単語が上に来るはずですが、これはどう説明すればよいでしょうか。

浮遊自然

フローティングボックスはドキュメントフローから外れます

上記の 2 番目の状況はなぜ発生するのでしょうか? これは、フロートが通常のドキュメントフローから外れており、ちょうど半分のレイヤーがドキュメントフローから外れているためです。ドキュメントフローから切り離されるということは、フローティングボックスの背景がドキュメントフローから分離されますが、コンテンツは依然として元の位置を占めていることを意味します。

画像の説明を追加してください

コード：

<style>
  .a {
      
      
    width: 100px;
    height: 100px;
    background-color: rgb(0, 0, 0, 0.2);
    float: left;
  }

  .b {
      
      
    background-color: orange;
  }
</style>

<div class="a"></div>
<div class="b">
  <p>窗前明月光</p>
  <p>疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>
</div>

オンラインデモ

【解説】まず、a ボックスに幅、高さ、透明色を与え、float を設定し、次に b ボックスにコンテンツを追加し、背景色を設定します。フローティングボックスの背景はドキュメントフローの外にあるため、b ボックスの背景は上に移動しますが、a ボックスのコンテンツはドキュメントフローの外にないため、b ボックスのコンテンツは脇に押しやられます。ボックス a の幅を 100% に設定すると、ボックス a の内容は完全に押し出され、b に固定の高さを設定すると、内容は背景から分離されます。

画像の説明を追加してください

<style>
  .a {
      
      
    width: 100%;
    height: 100px;
    background-color: rgb(0, 0, 0, 0.2);
    /*注释浮动会正常排布*/
    float: left;
  }

  .b {
      
      
    height: 150px;
    background-color: orange;
  }
</style>

<div class="a"></div>
<div class="b">
  <p>窗前明月光</p>
  <p>疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>
</div>

フローティングボックスの背景の高さが崩れてカオスなタイプセットが発生するのを防ぐために、フローティングボックスを高さ固定のコンテナでラップすることで解決できます。

<style>
  .wrapper {
      
      
    height: 100px;
  }

  .a {
      
      
    width: 100px;
    height: 100px;
    background-color: rgb(0, 0, 0, 0.2);
    float: left;
  }

  .b {
      
      
    background-color: orange;
  }
</style>

<div class="wrapper">
  <div class="a"></div>
</div>

<div class="b">
  <p>窗前明月光</p>
  <p>疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>
</div>

これは後続の要素の配置には影響しません。

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-TZIMbBB4-1665961352336)(image-20221016155604680.png)]

フローティング要素の位置

フローティングボックスはドキュメントフロー (半レベル) から外れ、親要素または他のフローティングボックスの左または右の境界線に隣接し、親要素の上端に隣接します。親要素の残りの幅がフローティング要素に収まらない場合、フローティングボックスは新しい行で開始され、順番に配置され続けます。

【重要】マージンを設定しない場合、フローティングボックスは隙間なく隣り合います。

【事例】写真間の隙間をなくします。

<style>
  .a {
      
      
    width: 300px;
    background-color: rgb(0, 0, 0, 0.2);
  }

  .a img {
      
      
    width: 100px;
  }
</style>

<div class="a">
  <img src="https://images.pexels.com/photos/13313507/pexels-photo-13313507.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load" alt="">
  <img src="https://images.pexels.com/photos/7961265/pexels-photo-7961265.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load" alt="">
</div>

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-EtgnbsLd-1665961352337)(image-20221016161512795.png)]

上の 2 つの図をよく見てください。それらの間には隙間があります。その隙間は画像要素間の空白文字によって形成されています。スペースや改行を使用せずに、2 つの図を並べて書くことができます。

<img src="..." /><img src="..." />

しかし、この解決策は信頼性が低く、フォーマット後にコードがハングする可能性があるため、2 つの画像にフローティングを追加することで、この問題を完全に解決できます (フローティングを追加すると背景が消えます)。オンラインデモ：

画像の説明を追加してください

フローティングボックスは親要素の高さに寄与しません。

通常のレイアウトフローでは、親要素で高さの値が設定されていない場合、その高さは展開されたコンテンツの高さと等しくなります (自然高とも呼ばれます)。ただし、フローティングボックスは親要素の高さに 0 を与えます。コンテナにフローティングボックスのみが含まれる場合 (フローティングレイアウト)、その高さは 0 になります。この現象は親要素の崩壊と呼ばれます。

画像の説明を追加してください

親要素の折りたたみは、現在のコンテナに影響を与えるだけでなく、特にコンテナ内のコンテンツが有益な場合には、後続のすべての要素にも影響を与える可能性があります。

画像の説明を追加してください

オンラインケース

前のケースでは、親要素の高さの値を設定することでこの問題を解決しましたが、これには明らかな欠点があります。コンテンツの高さが不確実な場合、またはコンテンツがコンテナの高さを超える場合、失敗します。フローティングの副作用を排除し、親要素の自然な高さを維持する方法はありますか?

最初の方法: 親要素コンテナを設定します。

overflow: hidden;

こうすることで、内部の要素が外部に影響を与えることはなくなります。この方法は副作用を解決しますが、自然高の問題は解決しません。

クリアフロート

クリアフロートとフロートは双子の兄弟です。フロートは使いやすいですが、「従順」ではない場合があり、他の要素に影響を与える可能性があります。クリアフロートはフローティングボックスの「尻を拭く」ために使用されます。

clear 属性は、要素のどの側でフローティング要素を許可しないかを定義します。CSS1 および CSS2 では、これは、クリア要素 (clear プロパティが設定されている要素) に上部マージンを自動的に追加することによって実現されます。CSS2.1では要素の上マージンの上にクリアスペースが追加されますが、マージン自体は変わりません。どちらの方法でも、最終結果は同じで、 left または right Clear と宣言されている場合、要素の上枠ボーダーは、その側にある要素の下マージンボーダーのすぐ下にフローティングされ^ます。

一般的な宣言方法:

clear: none;
clear: left;
clear: right;
clear: both;

上記の質問に答えてください。

2 番目の方法: 空の要素を作成し、孤立した領域を形成するように設定します.clear{clear:both;}(この時点でボックスの高さを削除する必要があります)。

<div class="box cyan">
  <div class="side orange right">很长的侧边栏</div>
  <p>
    君不见黄河之水天上来②，奔流到海不复回。
    君不见高堂明镜悲白发③，朝如青丝暮成雪④。
  </p>
  <div class="clear"></div>
</div>

<div class="lime">
  人生得意须尽欢⑤，莫使金樽空对月⑥。
  天生我材必有用⑦，千金散尽还复来⑧。
  烹羊宰牛且为乐，会须一饮三百杯⑨。
  岑夫子⑩，丹丘生⑪，将进酒，杯莫停⑫。
</div>

画像の説明を追加してください

素晴らしいです!!! 副作用と自然な高さの問題は完全に解決されますが、この方法では余分な空の要素が生成され、見た目が不快になります。改善するには::after疑似

<style>
  .box {
    
    
    width: 300px;
    /*height: 100px;*/ /*高度不需要*/
  }

  .side {
    
    
    width: 100px;
    height: 200px;
  }

  .right {
    
    
    float: right;
  }

  .clearfix::after {
    
    
    /*三条缺一不可*/
    display: block;
    content: '';
    clear: both;
    /*兼容性*/
    visibility: hidden;
    height: 0;
  }

  .orange {
    
    
    background-color: orange;
  }

  .lime {
    
    
    background-color: lime;
  }

  .cyan {
    
    
    background-color: cyan;
  }
</style>

<div class="box cyan clearfix">
  <div class="side orange right">很长的侧边栏</div>
  <p>
    君不见黄河之水天上来②，奔流到海不复回。
    君不见高堂明镜悲白发③，朝如青丝暮成雪④。
  </p>
</div>

<div class="lime">
  人生得意须尽欢⑤，莫使金樽空对月⑥。
  天生我材必有用⑦，千金散尽还复来⑧。
  烹羊宰牛且为乐，会须一饮三百杯⑨。
  岑夫子⑩，丹丘生⑪，将进酒，杯莫停⑫。
</div>

親要素のスタイルを設定するだけで、clearfix はフローティングの副作用を完全に排除できます。

まとめ

フローティング要素はレイヤーの半分がドキュメントフローから外れ、フローティング要素の背景はドキュメントフローから外れます。
フローティング要素は親要素の高さに影響しません。
フローティング要素には優れた特性があります。インライン要素は高さ、幅、上マージン、下マージンも設定でき、マージンが崩れることはありません。
フローティング要素は、後続の要素のタイプセットに影響を与える可能性があります。フローティング要素をクリアするには、clear を使用できます。カプセル化された clearfix クラスを使用することをお勧めします。

参考記事

♥ 私はフロントエンドエンジニアです。あなたの恋人、セン。いいねや注目をしていただきありがとうございます。ディスカッションやコラボレーションへの参加を歓迎します。

★ この記事はオープンソースであり、CC BY-SA 4.0 プロトコルを使用しています。転載する場合は出典を示してください:フロントエンドエンジニアの自己啓発. GitHub.com@xiayulu。

★ クリエイティブ協力や採用情報については、プライベートメッセージまたはメール:[email protected] に件名を「クリエイティブ協力またはフロントエンドエンジニア募集」と明記してお送りください。

サラ・コープ。フロート。css-tricks.com。↩︎
Isabella. CSS フローティング.segmentfaultをクリアする原理と方法↩︎