Float und Clear Float in HTML

Dieser Artikel stellt hauptsächlich Floating und Clearing Floating in HTML vor. Ich hoffe, dass er für alle hilfreich ist.

1. Float: Der Hauptzweck besteht darin, den Effekt des Textumbruchs um Bilder 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. Das schwebende Element befindet sich außerhalb des Dokumentflusses und sein übergeordnetes Element kann es nicht sehen, da es es nicht umgibt. Das untergeordnete Element hat eine Höhe, das übergeordnete Element jedoch Es wird nicht gestützt, was wir derzeit nicht wollen.

Es gibt drei Möglichkeiten, es zu lösen :

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

rrree

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

Der wahre Zweck Eine solche Anweisung besteht darin, zu verhindern, dass das übergeordnete Element durch übergroßen Inhalt gedehnt wird. Überlauf anwenden: versteckt. Danach behält das übergeordnete Element weiterhin seine festgelegte Breite bei und übergroße untergeordnete Inhalte werden vom Container abgeschnitten

Darüber hinaus hat Overflow: Hidden einen weiteren Effekt: Es kann zuverlässig erzwingen, dass das übergeordnete Element seine schwebenden untergeordneten Elemente enthält.

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 , footer {border: solid 1px;}
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

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

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

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

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

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe es kann jedem beim Lernen helfen. Hilft.

Verwandte Empfehlungen:

JS einfache ImplementierungFloatingFenster

Wie man mit http umgeht entführtFloatingWerbung

CSS-Implementierung des ClearingsFloatingProbleme

Das obige ist der detaillierte Inhalt vonFloat und Clear Float in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!