Heim >Web-Frontend >Front-End-Fragen und Antworten >Ist Float eine neue Funktion von CSS3?
Ist Float eine neue Funktion von CSS3?
- WBOYOriginal
- 2022-06-23 15:37:511374Durchsuche
Floating ist keine neue Funktion von CSS3. Das Float-Attribut, das die Richtung definiert, in die ein Element schwebt, kann bereits in CSS1 verwendet werden, um das Element nach links oder rechts zu verschieben, und die Elemente um es herum werden ebenfalls neu angeordnet Bewegen Sie die Maus nach links oder rechts, bis ihre Außenkante den Rand der umschließenden Box oder einer anderen schwebenden Box berührt.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
css float
Float ist keine neue Funktion von CSS3
CSS Float (float) verschiebt das Element nach links oder rechts und die Elemente um es herum werden ebenfalls neu angeordnet.
Float wird oft für Bilder verwendet, ist aber auch beim Layout sehr nützlich.
Wie Elemente schweben
Das Element schwebt horizontal, 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 eine neue Funktion von CSS3?" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>Ausgabeergebnis:
(Teilen von Lernvideos: CSS-Video-Tutorial , HTML-Video-Tutorial )
Das obige ist der detaillierte Inhalt vonIst Float eine neue Funktion von CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!