Mehrere Methoden zum Löschen von Floats in CSS

1. clear:both;

Diese Methode hat ein Problem: Der Rand ist ungültig.

2. Trennwandmethode

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

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

• Die „Innenwandmethode“ entwickelte sich

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

Hinweis: Diese Methode wird im Allgemeinen nicht verwendet, da sie Seiten-Tags hinzufügt.

3. overflow:hidden;

Die ursprüngliche Absicht besteht darin, den überlaufenden Text zu löschen. Es kann jedoch als Volksheilmittel zur Beseitigung von Flocken verwendet werden.
Hinweis: Diese Methode wird im Allgemeinen nicht verwendet, da der Bereich, in dem das Element überläuft, ausgeblendet wird.

4. Verwenden Sie Pseudoelemente

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

5. Elemente, die nicht auf der Seite vorhanden sind, können über CSS hinzugefügt werden hat ein eigenes Pseudoelement.

Das obige ist der detaillierte Inhalt vonMehrere Methoden zum Löschen von Floats in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!