Heim > Artikel > Web-Frontend > Was bedeutet Float in CSS?
Was bedeutet Float in CSS?
- WBOYOriginal
- 2021-12-22 16:48:356016Durchsuche
In CSS bedeutet float „schwebend“. Das Float-Attribut wird verwendet, um die Floating-Richtung des Elements zu definieren. Wenn das Float-Attribut für ein Element festgelegt ist, wird das Element auf anderen Elementen schweben und sich nach links bewegen oder rechts entsprechend dem Attributwert. Oder nicht schwebend, die Syntax lautet „element {float:value;}“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Was bedeutet float in CSS? In CSS wird das Float-Attribut verwendet, um die Richtung zu definieren, in der das Element schwimmt. Die Syntax lautet „element {float:value}“, wenn der Wert des Attributs „left“ ist ", das Element kann nach links schwebend gesetzt werden; wenn der Wert des Attributs auf "rechts" gesetzt ist, kann das Element so eingestellt werden, dass es nach rechts schwebt; wenn der Wert des Attributs auf "keine" gesetzt ist, ist das Element kann so eingestellt werden, dass es nicht schwimmt. Das Float-Attribut definiert, in welche Richtung das 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 davon, um welchen Elementtyp es sich handelt.
Bei schwebenden, nicht ersetzten Elementen geben Sie eine explizite Breite an, andernfalls werden sie so schmal wie möglich sein.
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 eine bestimmte Zeile genügend Platz hat.
Das Beispiel sieht wie folgt aus:
<html>
<head>
<style type="text/css">
img
{
float:right
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="/i/eg_cute.gif" / alt="Was bedeutet Float in CSS?" >
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>Ausgabeergebnis: CSS-Video-Tutorial
)
Das obige ist der detaillierte Inhalt vonWas bedeutet Float in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!