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

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

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

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

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

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

<h1 id="清除浮动">清除浮动</h1>
<div>
    <div>
        
    </div>
    <div>
        
    </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>
    <div></div>
    <div></div>
    <div></div>
</div>

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

<div>
    <div></div>
    <div></div>
    <br>
</div>

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

• <div>
      <div></div>
      <div></div>
  </div>

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

• を設定しますリーリー

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