Beispiel für die CSS3-Clear-Float-Methode

1. Zweck

Durch diesen Artikel kann jeder die Prinzipien und Methoden zum Entfernen von Floats verstehen und schließlich eine Methode finden, die nach Ansicht dieses Artikels die beste ist.

II. Einleitung

1. Die ursprüngliche Bedeutung des Schwebens einführen und wiederherstellen
2. Erklären Sie, wofür Floating in der tatsächlichen Entwicklung häufig verwendet wird
3. Frage: Warum müssen wir Floating löschen?
4. Antwort: So löschen Sie Floating und mehrere häufig verwendete Methoden
5. Schlussfolgerung: Dieser Beitrag untersucht die beste Methode

3. Haupttext

1. Die ursprüngliche Bedeutung des Schwebens

Der ursprüngliche Zweck des Schwebens bestand lediglich darin, Text um ein Bild herumlaufen zu lassen.

Aus der obigen Abbildung können wir ersehen, dass das Bild aus dem normalen Dokumentfluss extrahiert werden kann, wenn man es so einstellt, dass es links schwebt. Die nachfolgenden Elemente ignorieren die ursprüngliche Position des schwebenden Elements, sodass Sie sehen können, dass das als Blockelement angezeigte Span-Tag unter dem Bild eingefügt wird. Wir stellen jedoch fest, dass der Text nicht unter dem Bild eingebettet wird, da dies die reinste Bedeutung des Schwebens ist – den Text das Bild umgeben lassen (im Internet gibt es einige Diskussionen darüber, warum kein Text unter dem schwebenden Element eingefügt wird. Sie können danach suchen. In diesem Artikel wird dies hier nicht näher erläutert).

PS: Wenn Sie den Text unter dem schwebenden Element einfügen möchten, können Sie dies durch Festlegen der absoluten Positionierung tun.

// HTML-Code <Abschnitt>
    <div Klasse="Ursprung1">
      ![img](http://upload-images.jianshu.io/upload_images/2944582-8c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      <span>Stellen Sie sich vor, ich wäre ein großer Text</span>
    </div>
    <div Klasse="float1">
      ![img](http://upload-images.jianshu.io/upload_images/2944582-8c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      <span>Stellen Sie sich vor, ich wäre ein großer Text</span>      
    </div>
  </Abschnitt>

// css-Code.origin1 span {
  Anzeige: Block;
  Breite: 250px;
  Höhe: 120px;
  Hintergrundfarbe: #78f182;  
}

.float1 img{
  schweben: links;
}

.float1 Spanne {
  Anzeige: Block;
  Breite: 250px;
  Höhe: 120px;
  Hintergrundfarbe: #78f182;
}

2. Wofür wird Floating häufig verwendet?

Da durch Schweben Blockelemente nebeneinander angezeigt werden können, wird es häufig für Layouts wie Navigationsleisten und Inhaltsblockleisten verwendet.

// HTML-Code <Abschnitt Klasse="Abschnitt2">
    <ul>
      <li><a href="#">Produktcenter</a></li>
      <li><a href="#">Service-Center</a></li>
      <li><a href="#">Nachrichtenzentrum</a></li>
      <li><a href="#">Kundenreferenzen</a></li>
      <li><a href="#">Rekrutierung</a></li>
    </ul>
  </Abschnitt>

//css-Code.Abschnitt2 li{
  Listenstil: keiner;
  schweben: links;
  Polsterung: 20px;
  Höhe: 20px;
  Hintergrundfarbe: #1249c3;
  Rahmen rechts: 1px durchgezogen #a0a2a2;
}

.Abschnitt2 li a {
  Farbe: #fff;
}

3. Warum sollten wir Floating löschen?

Aus dem obigen Bild können Sie ersehen, dass, nachdem die drei Abschnitte nach links schweben, ihr übergeordnetes Element ul nicht durch die untergeordneten Elemente erweitert werden kann, ohne die Höhe festzulegen, da sie außerhalb des normalen Dokumentflusses liegen (die Hintergrundfarbe ist sichtbar, weil ich die Polsterung von ul auf 10px festgelegt habe). Wenn Sie daher später neue Elemente hinzufügen, werden diese natürlich hinter ul platziert, d. h. unter den drei schwebenden Abschnitten eingefügt.
Dies ist nicht das, was wir wollen, weshalb wir den Float löschen müssen.

// HTML-Code <ul>
      <li><p>Interaktiver Bereich</p></li>
      <li><p>Lernbereich</p></li>
      <li><p>Nachrichtenbrett</p></li>
      Ich bin das übergeordnete Element ul, das außerhalb der drei Abschnitte umschlossen werden soll
    </ul>

    <div class="new">Ich bin das neue Div nach ul</div>

//CSS-Code ul {
  Polsterung: 20px;
  Hintergrundfarbe: #b7db05;
}

ul li {
  Breite: 200px;
  Höhe: 200px;
  Hintergrundfarbe: #e3e3e3;
  Rand rechts: 20px;
  Textausrichtung: zentriert;
  schweben: links;
}

.neu {
  Höhe: 50px;
  Hintergrundfarbe: #1be751;
}

4. So löschen Sie schwebende

(1) Fügen Sie nach dem letzten Float-Li-Element ein leeres Blockelement „div“ hinzu und setzen Sie „clear:both“, um alle Floats zu löschen.

// HTML-Code <ul>
      <li><p>Interaktiver Bereich</p></li>
      <li><p>Lernbereich</p></li>
      <li><p>Nachrichtenbrett</p></li>
      Ich bin das übergeordnete Element ul, das außerhalb der drei Abschnitte umschlossen werden soll
      <div style="clear:both;"></div> // Code hinzufügen</ul>

    <div class="new">Ich bin das neue Div nach ul</div> 

Wirkung: Das Div-Element hinter ul kann tatsächlich unter dem schwebenden Element angeordnet werden, und das Einstellen von Rändern, Polsterungen usw. gilt auch für die untere Grenze des schwebenden Elements.

Nachteile: Es handelt sich um ein redundantes Tag ohne strukturelle Bedeutung.

(2) Setzen Sie overflow: hidden oder overflow: auto des übergeordneten Elements ul.

//CSS-Code ul {
  Polsterung: 20px;
  Hintergrundfarbe: #e7a5b8;
  Überlauf: versteckt;
} 

Wirkung: Für die Elemente nach ul können diese der Reihe nach unter den schwebenden Elementen angeordnet werden.
Nachteile: Die Verwendung dieser Überlaufmethode kann sich auf die Elemente auswirken, die Positionierung verwenden, da innerhalb des Bereichs von ul der überschüssige Teil ausgeblendet wird. Wenn sich das positionierte Element also im Bereich jenseits von ul befindet, wird es ausgeblendet.

(3) Fügen Sie mit der Pseudoklassenmethode „clear:both“ nach dem letzten Floating-Element hinzu.

// CSS-Code ul:nach {
  Inhalt: "";
  klar: beides;
  Anzeige: Block;
} 

Wirkung: Die Auswirkungen des Floatings werden effektiv eliminiert, ohne dass zusätzliche Effekte oder neue semantisch falsche Tags erforderlich sind.
Nachteile: Bisher keine gefunden.

IV. Fazit

Zusammenfassend ist in diesem Artikel davon auszugehen, dass die beste Methode darin besteht, die Auswirkungen des Floatings durch die Verwendung der After-Pseudoklasse zu beseitigen. Jeder ist herzlich eingeladen, darüber zu diskutieren.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.