Heim > Artikel > Web-Frontend > Ist Float neu in CSS3?
Ist Float neu in CSS3?
- WBOYOriginal
- 2022-04-11 17:49:102040Durchsuche
Floating ist für CSS3 nichts Neues. Das Float-Attribut kann verwendet werden, um die Richtung zu definieren, in die das Element schwebt. Dieses Attribut ist in CSS1 verfügbar. Unabhängig davon, welches Element auf Float eingestellt ist, generiert das Element eine Box auf Blockebene Die Syntax lautet „element {float :value;}“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Ist Floating eine neue Ergänzung zu CSS3? Das Attribut
float definiert, in welche Richtung ein Element schwebt. In der Vergangenheit wurde diese Eigenschaft immer auf Bilder angewendet, wodurch der Text um das Bild herum umbrochen wurde. In CSS kann jedoch jedes Element schwebend dargestellt werden. Ein schwebendes Element erstellt eine Box auf Blockebene, unabhängig von der Art des Elements.
Bei schwebenden, nicht ersetzten Elementen geben Sie eine explizite Breite an, andernfalls werden sie so schmal wie möglich sein.
Hinweis: Wenn in einer Zeile nur sehr wenig Platz für ein schwebendes Element vorhanden ist, springt das Element zur nächsten Zeile und dieser Vorgang wird fortgesetzt, bis in einer bestimmten Zeile genügend Platz vorhanden ist.
Die horizontale Richtung des Elements schwebt, was bedeutet, dass sich das Element nur nach links und rechts, aber nicht nach oben und unten bewegen kann.
Ein schwebendes Element versucht, sich nach links oder rechts zu bewegen, bis seine Außenkante den Rand der enthaltenden Box oder einer anderen schwebenden Box berührt.
Elemente nach dem schwebenden Element umgeben es.
Elemente vor dem schwebenden Element sind nicht betroffen.
Wenn das Bild nach rechts verschoben wird, wird der folgende Textfluss links davon umbrochen:
Beispiel ist wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123/title>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="logocss.gif" style="max-width:90%" style="max-width:90%" / alt="Ist Float neu in CSS3?" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>Ausgabeergebnis:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonIst Float neu in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!