Heim > Artikel > Web-Frontend > So setzen Sie Float in CSS
So setzen Sie Float in CSS
- 醉折花枝作酒筹Original
- 2021-04-21 10:40:408640Durchsuche
In CSS können Sie das Float-Attribut verwenden, um Float festzulegen. Sie müssen nur „float:left|right|none“ für das Element festlegen; bedeutet, dass das Element nicht schwebt und an der Stelle im Text erscheint, an der es erscheint.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Floating kann über das Float-Attribut in CSS festgelegt werden. Das Float-Attribut definiert, in welche Richtung das Element schwimmt. 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.
float-Attribut:
Bei schwebenden, nicht ersetzten Elementen geben Sie eine explizite Breite an, andernfalls werden sie so schmal wie möglich gemacht.
Hinweis: 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 in einer bestimmten Zeile genügend Platz vorhanden ist. Mögliche Werte des
float-Attributs:
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.
CSS-Einstellung Float-Beispiel:
<html>
<head>
<style type="text/css">
img
{
float:right
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="猫/images/1.jpg" style="max-width:90%"/ alt="So setzen Sie Float in CSS" >
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
</p>
</body>
</html>Ausführungsergebnis:
Eine schwebende Box kann sich nach links oder rechts bewegen, bis ihre Außenkante den Rand der enthaltenden Box oder einer anderen schwebenden Box berührt. Da sich die schwebende Box nicht im normalen Fluss des Dokuments befindet, verhält sich eine Blockbox im normalen Fluss des Dokuments so, als ob die schwebende Box nicht vorhanden wäre.
Der Vorteil des Schwebens liegt natürlich im Layout, z. B. beim Schweben, um ein dreispaltiges Layout, Textumbruch usw. zu bilden. Aber das Schweben hat auch ein Problem, das heißt, es führt dazu, dass die Höhe reduziert wird. Wie das Bild oben zeigt, wird die Höhe des übergeordneten Elements reduziert und die schwebenden untergeordneten Elemente werden nicht umbrochen, was zu Layoutfehlern führt.
Empfohlenes Lernen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo setzen Sie Float in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!