Heim >Web-Frontend >Front-End-Fragen und Antworten >CSS, was Float ist
CSS, was Float ist
- 青灯夜游Original
- 2021-04-02 17:17:442022Durchsuche
In CSS ist Floating eine Methode zum Herausnehmen eines Elements aus dem Dokumentfluss. Dabei wird das Element je nach Float-Wert nach links oder rechts verschoben, und die Elemente um es herum werden ebenfalls neu angeordnet, bis seine Außenkante erreicht wird die umschließende Box oder den Rand einer anderen schwebenden Box.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Floating ist eine Methode, bei der ein Element aus dem Fluss des Dokuments herausgenommen wird, wodurch es nach links oder rechts verschoben wird und die Elemente um es herum neu angeordnet werden.
Die Bedeutung von Floating: Das Element mit dem gesetzten Floating-Attribut löst sich von der Kontrolle des normalen Standardflusses und bewegt sich an die in seinem übergeordneten Element angegebene Position. Platzieren Sie die Elemente auf Blockebene in einer Zeile und Float löst sich vom Standardfluss abweicht und die Position nicht einnimmt. Der Standardfluss kann nur nach links und rechts schweben, nicht nach oben und unten.
Floating ist eine sehr nützliche Layoutmethode, mit der sich die Reihenfolge ändern lässt, in der Objekte auf der Seite vorwärts und rückwärts fließen. Dies hat den Vorteil, dass das Layout des Inhalts einfach ist und eine gute Skalierbarkeit gewährleistet ist.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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="CSS, was Float ist" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>
(Lernvideo-Sharing: CSS-Video-Tutorial)
Eigenschaften von Floating-Elementen:
1. Floating-Elemente lösen sich vom Standarddokumentfluss und beseitigen die Einschränkungen von Elementen auf Blockebene und Inline-Elemente
2. Floating-Elemente haben den Effekt, dass sie aneinander haften, wenn die Breite nicht ausreicht, kommt es zu einem automatischen Zeilenumbruch
3. Obwohl Floating-Elemente vom Standarddokumentfluss getrennt sind, werden sie nicht voneinander getrennt den Textfluss und scheint von Wörtern umgeben zu sein gleiche Ebene wie das übergeordnete Element
(2) gleiche Ebene wie das schwebende Element Die nicht schwebenden Elemente folgen ihm, da das schwebende Element aus dem Dokumentenfluss ausbricht und nicht seine ursprüngliche Position einnimmt(3) Wenn das Das schwebende Element ist nicht das erste schwebende Element. Die Elemente davor müssen ebenfalls schwebend sein, sonst wirkt es sich leicht auf die Seite aus. Die Struktur zeigt
, daher müssen die schwebenden Elemente gelöscht werden. Wie also den Float löschen? Empfohlene Lektüre „
Wie lösche ich Floats in CSS? Einführung in 3 Methoden》
Weitere Kenntnisse zum Thema Programmierung finden Sie unter:
ProgrammiervideoDas obige ist der detaillierte Inhalt vonCSS, was Float ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!