クリアフロートとクローズドフロートの紹介

この記事は、フロートのクリアとクローズについての紹介です。必要な方は参考にしていただければ幸いです。

フロートをクリアする必要がある理由

• 子要素 float:left; がドキュメント フローから離れると、親要素が折りたたまれます (使用できません)。保持する)

• 親要素は子要素によってサポートされています

• #フロートをクリアしますclear:both

<h1>清除浮动</h1>
<div class="border-div clear">
    <div class="div1">
        
    </div>
    <div class="div2">
        
    </div>
</div>


// 伪元素 :after
.clear:after{
    clear:both;
    content:".";
    display:table;
    width:0;
    height:0;
    visibility:hidden;
}

• Closed float - 追加要素を追加しますclear:both

親要素は高さを設定しません

子元素 float:left

额外增加元素 clear:both

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <div style="clear:both"></div>
</div>

# #Closed float -- br とその独自の HTML 属性を使用します
==Note==clear=all 非推奨の属性 (moz)

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <br clear="all">
</div>

フロートを閉じる -- 親要素は overflow:hidden

• <div class="main">
      <div class="sub"></div>
      <div class="sub"></div>
  </div>

を設定します。 フロートを閉じます -- 親要素は display:table

• を設定しますリーリー

以上がクリアフロートとクローズドフロートの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。