Heim  >  Artikel  >  Web-Frontend  >  Ist Float eine neue Funktion von CSS3?

Ist Float eine neue Funktion von CSS3?

WBOY
WBOYOriginal
2022-06-23 15:37:511331Durchsuche

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.

Ist Float eine neue Funktion von CSS3?

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:

Ist Float eine neue Funktion von CSS3?

(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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn