Ausführliche Erklärung von HTML-Floats und Clear-Floats

Dieser Artikel bietet hauptsächlich einen Überblick über Floating- und Clearing-Floats auf der Seite und gibt Beispiele zur Veranschaulichung. Er hat einen gewissen Referenzwert.

1. Float: Hauptzweck Es besteht darin, den Effekt des Textumbruchs in Bildern zu erzielen.

Es ist auch der einfachste Weg, ein mehrspaltiges Layout zu erstellen.

<img src= “ ” />
<p>文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>

【1】Textumbruchbild

　　P {margin: 0; border: solid 1px;}
　　img {float: left;}

【2】Mehrspaltiges Layout erstellen

　　P {margin: 0; border: solid 1px; width: 200px; float: left;}
　　img {float: left;}

2. Schwebende Elemente lösen Wenn der Dokumentfluss unterbrochen wird, kann das übergeordnete Element ihn nicht mehr sehen, da er ihn nicht umgibt. Das untergeordnete Element hat eine Höhe, das übergeordnete Element wird jedoch nicht unterstützt.

Es gibt drei Möglichkeiten zur Lösung unten. Bitte betrachten Sie die Situation und wenden Sie sie rational an:

<section>
<img src=" />
<p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
</section>
<footer>这是底部这是底部这是底部这是底部这是底部这是底部这是底部</footer>

section , footer {border: solid 1px;}
img {float: left;}

【1】Überlauf hinzufügen: ausgeblendet für das übergeordnete Element; erzwingen, dass das übergeordnete Element das schwebende Element umgibt

Der eigentliche Zweck einer solchen Anweisung besteht darin, zu verhindern, dass das übergeordnete Element durch übergroßen Inhalt unterstützt wird. Nach der Anwendung von „overflow: versteckt“ behält das übergeordnete Element weiterhin seine festgelegte Breite bei und übergroßer untergeordneter Inhalt wird vom Container abgeschnitten

Darüber hinaus hat overflow:hiden einen weiteren Effekt: Es zwingt ein übergeordnetes Element zuverlässig dazu, seine schwebenden untergeordneten Elemente zu enthalten.

kann nicht für ein Element der obersten Ebene verwendet werden, das ein Dropdown-Menü verwendet, andernfalls wird das Dropdown-Menü als untergeordnetes Element nicht angezeigt.

[2] Gleiten Sie gleichzeitig mit dem übergeordneten Element, die Breite entspricht zu 100 % der Breite des Browsers und stellen Sie für die Fußzeile ein klares Gleitkomma ein, damit die Fußzeile angezeigt wird nicht neben dem Abschnitt drücken

　　section {border: solid 1px; float: left; width:100%}
　　footer {border: solid 1px; clear: left}
　　img {float: left;}

kann nicht für Elemente verwendet werden, die automatisch in der Nähe von Rändern zentriert werden. Sonst ist es nicht mehr zentriert.

【3】Fügen Sie nicht schwebende klare Elemente (Pseudoelemente) hinzu

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

3. So löschen Sie, wenn kein übergeordnetes Element vorhanden ist (img p als Gruppe, kein übergeordnetes Element)

<section>
　　<img src=" />
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
　　<img src=" />
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
　　<img src=" />
　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
</section>

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

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung von HTML-Floats und Clear-Floats. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!