Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Warum wird Text um schwebende Elemente herum umbrochen?

Barbara Streisand
Freigeben: 2024-10-30 13:49:26
Original
907 Leute haben es durchsucht

Why Does Text Wrap Around Floated Elements?

Anomalie beim Textumbruch: Warum fließt Text um Floats?

Beim Positionieren von Elementen auf einer Webseite ist das Standardverhalten von HTML-Elementen von oben nach unten fließen, wie im normalen Dokumentenfluss angegeben. Wenn jedoch die Float-Eigenschaft auf ein Element angewendet wird, ändert sich dieses Verhalten.

Floating Elements: Den Fluss unterbrechen

Float platziert ein Element auf der linken oder rechten Seite seines Containers, wodurch Text und Inline-Elemente umbrochen werden. Dies liegt daran, dass das schwebende Element aus dem normalen Fluss der Seite entfernt wird, was bedeutet, dass andere Elemente sich überlappen oder von ihm überlappt werden können, ähnlich wie absolut positionierte Elemente.

Text- und Inline-Elemente: Das Einzige Ausnahmen

Während alle anderen Elemente von der Position eines schwebenden Elements beeinflusst werden, bilden Text- und Inline-Elemente die Ausnahme. Sie wickeln sich weiterhin um das schwebende Element und vermeiden Überlappungen.

Float-Eigenschaften verstehen

Laut CSS-Dokumentation:

  • Der Float Die CSS-Eigenschaft platziert ein Element auf der linken oder rechten Seite seines Containers, sodass Text und Inline-Elemente es umschließen können.
  • Das Element wird aus dem normalen Seitenfluss entfernt, bleibt jedoch weiterhin Teil der Seite Fluss.

Basierend auf diesen Eigenschaften können wir schließen, dass:

  • Aus dem normalen Fluss entfernt: Schwebende Elemente können sich überlappen oder von anderen überlappt werden Elemente im normalen Fluss.
  • Umbruchausnahme für Text- und Inline-Elemente: Diese Elemente werden immer um schwebende Elemente umbrochen, unabhängig von ihrer Position.

Beispiel in Aktion

Bedenken Sie den folgenden HTML- und CSS-Code:

<code class="html"><div class="float"></div>
<div class="blue"></div></code>
Nach dem Login kopieren
<code class="css">.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  background: blue;
}</code>
Nach dem Login kopieren

In diesem Beispiel wird das rote Div mit der Klasse „float“ positioniert auf der linken Seite, während das blaue Div mit der Klasse „blue“ darunter positioniert wird. Allerdings wird jeder Text, der zwischen den roten und blauen Divs erscheint, um das rote Div herum umbrochen, wodurch die Integrität des Textflusses gewahrt bleibt.

Das obige ist der detaillierte Inhalt vonWarum wird Text um schwebende Elemente herum umbrochen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!