CSS で浮動小数点数をクリアするいくつかの方法

1. クリア: 両方

この方法には問題があります: マージンが無効です。

2. 隔壁法

    <p class="box1">
    </p>
    <p class="cl hl"></p> /*墙*/
        <p class="box2">
    </p>

    cl{
        clear: both;
    }
    .hl{
        height: 16px;
    }

• <p>
      <p></p>
      <p></p> /*两个p都浮动，所以p不会被撑出高*/
      <p class="cl"></p> /*在家里建一堵墙就能让儿子给p撑出高*/
  </p>

から進化した「内壁法」 注: この方法はページタグが追加されるため、通常は使用されません。

3. overflow:hidden;

本来の目的は、ボックスの外にはみ出したテキストを消去することです。ただし、浮きを解消する民間療法として使用できます。
注: この要素がオーバーフローした領域は非表示になるため、このメソッドは通常は使用されません。

4. 疑似要素を使用する

.clearfix:after {
    　　　　content: '';
   　　　　 height: 0;
   　　　　 line-height: 0; /*或 overflow:hidden*/
    　　　　display: block;
    　　　　visibility: hidden;
    　　　　clear: both;
　　　　}
　　　　.clearfix {
   　　　　 zoom: 1;  /*兼容ie6*/
　　　　}

5. 二重の疑似要素タグ

各要素には独自の疑似要素があります。

りー

以上がCSS で浮動小数点数をクリアするいくつかの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。