フロートをクリアする方法は何ですか？

リファレンス：CSSフローティングとフローティングをクリアする5つの方法

1.フロートをクリアする理由

1. 標準フロー：ボックスはそれぞれ行全体を占めます。子ボックスが標準ストリームの場合、親ボックスには高さがありませんが、親ボックスの高さを引き伸ばします。
2. フローティング：ボックスはフローティングし、元の位置を占めません。親ボックスに高さが定義されていない場合、親ボックスは開かれず、親ボックスの高さは0です。注：（フローティングでは、複数のブロックレベルの要素を1行で表示でき、ブロック間にギャップはありませんが、親ボックスのフロートをクリアするように注意してください。そうしないと、親ボックスが拡大されません）。

したがって、フロートをクリアすることは、主に、子フロートが原因で親要素の内部の高さが0になるという問題を解決することです。

2.フロートをクリアする方法

1. 親divは疑似クラス:afterを定義し、zoom推奨されます

.clearfix:after{
    content:"";  /*设置内容为空*/
    height:0;  /*高度为0*/
    line-height:0;  /*行高为0*/
    display:block;  /*将文本转为块级元素*/
    visibility:hidden;  /*将元素隐藏*/
    clear:both;  /*清除浮动*/
}
.clearfix{
    zoom:1;  /*为了兼容IE*/
}

利点：ブラウザーのサポートは優れており、奇妙な問題が発生しにくい
欠点：コードの2つの文を組み合わせて、主流のブラウザーをサポートする必要があります
2. 末尾に空白のdivタグを追加し、clear:both主に使用します

//对添加的元素使用 clear:both
.clear{clear:both;}
<div class="box">
    <div class="red" style="float:left;">1</div>
    <div class="sienna" style="float:left;">2</div>
    <div class="blue" style="float:left;">3</div>
    //添加一个新元素
    <div class="clear"></div>
</div>

利点：シンプルで、コードが少ない、優れたブラウザサポート、奇妙な問題が発生しにくい
欠点：ページに多くのフローティングレイアウトがある場合、空のdivを多数追加する必要があります

3. 親divの定義：overflow:hidden
   利点：シンプル、少ないコード、優れたブラウザーサポート。
   短所：widthまたはzoom：1を定義する必要があり、位置では使用できません

4. 親divが高さを定義します。
   長所：シンプルでコードが少ない
   短所：固定高さのレイアウトにのみ適しており、正確な高さを指定する必要があります

5. 親divの定義overflow:auto
   利点：シンプル、コードが少ない、優れたブラウザーサポート
   欠点：内部の幅と高さが親divを超えると、スクロールバーが表示されます。