Heim >Web-Frontend >CSS-Tutorial >Welche Attribute werden zum Floaten von Elementen in CSS verwendet?
Welche Attribute werden zum Floaten von Elementen in CSS verwendet?
- 青灯夜游Original
- 2021-03-22 10:56:034191Durchsuche
Das Float-Attribut wird verwendet, um Elemente in CSS zu schweben. Das Float-Attribut wird verwendet, um zu definieren, in welche Richtung ein Element schwebt. Nachdem ein Element das Float-Attribut verwendet hat, kann das Element vom Standardfluss selbst getrennt werden und über anderen Elementen schweben, sodass es nicht mehr den ursprünglich dazugehörenden Platz einnimmt Dies führt jedoch auch dazu, dass nachfolgende Elemente nach oben verschoben werden und Platz einnehmen, der ursprünglich zu diesem Element gehörte.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Das Float-Attribut wird verwendet, um Elemente in CSS zu schweben.
css float-Attribut
float, wie der Name schon sagt, schweben Elemente mit dem Float-Attribut entsprechend dem Attributwert nach links oder rechts. Wir bezeichnen Elemente mit dem Float-Attribut als Floating-Elemente.
Nachdem ein Element das Float-Attribut verwendet, kann das Element vom Standardfluss selbst getrennt werden und über anderen Elementen schweben, sodass es nicht mehr den ursprünglich zum Element gehörenden Platz einnimmt. Dadurch werden die nachfolgenden Elemente nach oben verschoben und belegt der Raum, der ursprünglich zum Element gehörte.
Attributwert
left Das Element schwebt nach links.
rechte Elemente schweben nach rechts.
kein Standardwert. Das Element ist nicht schwebend und erscheint dort, wo es im Text erscheint.
Verstehen des Float-Attributs
1 Das Float-Attribut wirkt sich nur auf das Element selbst aus, das dieses Attribut verwendet, und auf die folgenden Elemente (die folgenden Elemente werden nach oben verschoben –> der Fußzeilenblock wird nach oben verschoben).
2. Nachdem das Inline-Element das Float-Attribut verwendet hat, wird es zu einem Element auf Blockebene und die Höhe und Breite des Elements können festgelegt werden (siehe A-Tag).
3. Das Float-Attribut wird im Allgemeinen zusammen mit dem Clear-Attribut der folgenden Tags verwendet, um die Auswirkungen des Float-Attributs auf die folgenden Elemente zu löschen.
4. Wenn bei Elementen, die das Float-Attribut verwenden, die Elementbreite nicht festgelegt ist, wird die Elementbreite automatisch an die Breite des Inhalts angepasst (siehe Inhalts-DIV – die Größe des Inhaltsblocks ist nicht definiert). es wird also automatisch angepasst).
[Empfohlenes Tutorial: CSS-Video-Tutorial]
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文网</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="Welche Attribute werden zum Floaten von Elementen in CSS verwendet?" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>Rendering:
Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !
Das obige ist der detaillierte Inhalt vonWelche Attribute werden zum Floaten von Elementen in CSS verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Wie verwende ich CSS, um einen Bildkarusselleffekt zu erzielen? (Codebeispiel)
- Wie erzielt man mit CSS3 einen Meteorschauereffekt? (Codebeispiel)
- Verwenden Sie reines CSS, um den kreisförmigen Navigationsmenüeffekt zu implementieren (Codebeispiel)
- Verwenden Sie reines CSS, um einen einfachen Ladeanimationseffekt zu erzielen (Codebeispiel).