Allgemeine Verwendung von Floats in CSS und Einführung in das Löschen von Floats (Codebeispiel)

Dieser Artikel bringt Ihnen die allgemeine Verwendung von Floats in CSS und die Einführung von Clearing-Floats (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.

Floating ist ein relativ problematisches Attribut in CSS und geht normalerweise mit dem Löschen des Floats einher. Heute werden wir am Floating arbeiten.

Allgemeine Verwendung

Wenn wir ein Element auf Float setzen, wird tatsächlich folgender Effekt erzielt:

Ich glaube, jeder hat dieses Layout gesehen. Viele Zeitschriften verwenden diese Art der Illustration auf der linken oder rechten Seite und den Effekt des Textumbruchs.

Eine weitere häufige Verwendung von Floats ist wie folgt:

Das heißt, innerhalb einer bestimmten Zeile einen bestimmten Teil richtig machen- ausgerichtet. Normalerweise wird es nicht mit Margen, sondern mit Floats implementiert.

Probleme durch Floating

Das Floating-Element kann das übergeordnete Element nicht unterstützen, wodurch die Höhe zusammenbricht! !

Sehen Sie sich das folgende Beispiel an:

<div>
  <div></div>
  <div></div>
</div>

.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}

Wir können den größeren Block sehen, wenn er schwebt. Das übergeordnete Element kann nicht erweitert werden Element. Normalerweise ist dies nicht das, was wir wollen, da es zu einem verwirrenden Layout führt. Dies wird besonders deutlich, wenn alle untergeordneten Elemente innerhalb eines übergeordneten Elements schwebend sind und die Höhe des übergeordneten Elements auf 0 reduziert wird.

Float löschen

Wenn wir Floats verwenden und nicht möchten, dass dies passiert, müssen wir das löschen schwimmt.

Es mag viele Möglichkeiten geben, Floats zu löschen, aber es ist jetzt beliebter. Mein persönlicher Favorit ist wie folgt:

Fügen Sie zuerst das folgende CSS hinzu:

.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

Dann , in Fügen Sie die Klasse clearfix zu im übergeordneten Container hinzu. Der endgültige Code lautet wie folgt:

<div>
  <div></div>
  <div></div>
</div>

.container {
  background-color: lightblue;
  font-size: 0;
}
.son1 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: orange;
}
.son2 {
  width: 100px;
  height: 100px;
  float: right;
  background-color: lightgray;
}
.clearfix:after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

Der erzielte Effekt ist wie folgt:

Floating-Elemente können die Höhe des übergeordneten Containers erweitern!

Zusammenfassung

• Floating-Elemente können die Höhe des übergeordneten Containers nicht tragen, daher müssen sie frei gemacht werden

• Floating can sehr einfach sein Die Implementierung ist rechtsbündig.

• Floating kann leicht einen Textumbrucheffekt erzielen.

Achten Sie daher auf die Verwendungsszenarien von Floats und löschen Sie diese bei Bedarf, damit Sie Floats gut steuern können

Das obige ist der detaillierte Inhalt vonAllgemeine Verwendung von Floats in CSS und Einführung in das Löschen von Floats (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!