So setzen Sie Float in CSS-CSS-Tutorial-php.cn

So setzen Sie Float in CSS

醉折花枝作酒筹

Freigeben： 2023-01-05 16:10:17

Original

8648 Leute haben es durchsucht

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.

So setzen Sie Float in CSS

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>

Nach dem Login kopieren

Ausführungsergebnis:

So setzen Sie Float in CSS

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!