Eine detaillierte Einführung in verschiedene Möglichkeiten zum Löschen von Floats in CSS

Was ist ein Float?

Funktionen: 1 – Schwebende Elemente nehmen nicht den Platz des Standardflusses ein, wirken sich jedoch auf das Layout des Textes im Standardfluss aus. Floating schwimmt nur nach links und rechts.
2 – Die Position des schwebenden Elements A bezieht sich auf das vorherige Element. Die Oberseite von A wird an der Oberseite des vorherigen Elements ausgerichtet, wenn es über eine Gleitkommazahl verfügt, und an der Unterseite, wenn keine Gleitkommazahl vorhanden ist.
3 – Ein untergeordnetes Feld in einem übergeordneten Feld. Wenn eines der untergeordneten Elemente schwebend ist, müssen die anderen untergeordneten Elemente schwebend sein, um eine Zeile anzuzeigen.
4 – Nachdem das Element schwebend ist und die Breite und Höhe nicht festgelegt sind, legt das Element die Größe des Inhalts entsprechend der Menge des Inhalts fest und verfügt über die Attribute des Inline-Blockelements.
5 – Nachdem das Element schwebend ist, wenn das übergeordnete Element keine Höhe festlegt. Führt dazu, dass die Höhe des übergeordneten Elements reduziert wird.
Dieses Problem lösen?
-----Attribute zum übergeordneten Element hinzufügen: overflow:hidden; den überschüssigen Teil ausblenden

overflow attribute:
Wenn die Elemente in der Box die Größe des Sonnenflecks selbst überschreiten, wird der Inhaltsanzeigemodus
sichtbar: Der Inhalt wird nicht gekürzt und außerhalb der Elementbox angezeigt (Standard)
versteckt: wird gekürzt und ausgeblendet, Sie können dieses Attribut verwenden, um den Float zu löschen
automatisch: adaptive Anzeige-Bildlaufleiste
scrol: Der Inhalt wird zugeschnitten und die Bildlaufleiste wird angezeigt

bfc:
Überlauf kann den bfc des Elements auslösen, sodass das Element über den Platz und die Berechtigungen verfügt für den Schriftsatz. Alle Elemente innerhalb des BFC basieren auf dem übergeordneten Element, das den Schriftsatz und das Layout durchführt, und alle übergeordneten Elemente verfügen über Umbrucheigenschaften. Dies ist das Prinzip, das das Problem des Höhenkollapses löst.
Floating, Positionierung, Überlauf, Anzeige, Tabelle, Tabellenzelle können alle BFC auslösen.

Float löschen:
– Dies bedeutet, dass das Element im Standardstream angezeigt wird, wenn auf der linken und rechten Seite des aktuellen Elements keine schwebenden Elemente vorhanden sind.
--Vier Möglichkeiten, Schwimmkörper zu entfernen:
1. Verwenden Sie leere Etiketten, um Schwimmkörper abzuräumen und sie an der Wand anzubringen. Fügen Sie Tags hinzu.
Fügen Sie nach der schwebenden Beschriftung ein 915caa8c7a7823c8ba9e5493889b0db994b3e26ee717c64999d7867364b1b4a3 hinzu, legen Sie nicht die Breite und Höhe fest, sondern legen Sie .clearboth{clear:both} fest und fügen Sie dann die erforderliche Beschriftung ein dieses Leerzeichen Direkt nach der Beschriftung
2. Verwenden Sie das Überlaufattribut, um den Float zu löschen. Wird zu unbeabsichtigten Verletzungen führen.
overflow:hidden;
3. Verwenden Sie das Nachher-Pseudoobjekt, um Floats zu löschen.
4. Verwenden Sie das Vorher-Nachher-Pseudoobjekt, um Floats zu löschen.
Clearfix (eine Kombination aus den Methoden 2, 3 und 4, häufig verwendet).

.clearfix
   父盒子要把子盒子包裹住，触发bfc同时清除前后浮动。
   .clearfix{
      display:table;<!-- 触发dfc -->

   }
   .clearfix:before,.clearfix:after{
      content:"";
      display:block;
      clear:both;
      height:0;
   }
   在ie6中display:table;不能触发dfc，所以用以下方式进行触发
   .clearfix{
      _zoom:1;
   }

Verwendung:

<p class="top">top</p>
	<p class="clearfix">
	    <p class="left">left</p>
	    <p class="right">right</p>
	</p>			
	<p class="bottom">bottom</p>

.clearfix{
			 	display: table;/* 触发nfc */
			 }
			 .clearfix:before,.clearfix:after{
				/* 前后加一个空的标签清除浮动 */
				content: "";
				display: block;
				height: 0;
				clear: both;
			 }
			 .clearfix{
			 	_zoom:1;/* 为了兼容ie6 */
			 }

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in verschiedene Möglichkeiten zum Löschen von Floats in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!