Die CSS-Eigenschaft ist eine sehr wichtige Eigenschaft für das Layout. Damit können Sie die Gestaltung Ihrer Webseiten genau so positionieren, wie sie angezeigt werden sollen. Um sie jedoch verwenden zu können, müssen Sie wissen, wie sie funktionieren.
In einem Stylesheet sieht die CSS-Float-Eigenschaft folgendermaßen aus:
.right {float: right; }
Dies sagt dem Browser, dass alles mit der Klasse "rechts" nach rechts verschoben werden sollte.
Sie würden es so zuweisen:
class = "right" />
Was können Sie mit der CSS-Float-Eigenschaft verschieben?
Sie können nicht jedes Element auf einer Webseite verschieben. Sie können nur Elemente auf Blockebene verschieben. Dies sind die Elemente, die auf der Seite einen Platzblock einnehmen, wie Bilder (), Absätze (), Divisionen () und Listen ().
Andere Elemente, die Text betreffen, jedoch keine Box auf der Seite erstellen, werden als Inline-Elemente bezeichnet und können nicht verschoben werden. Dies sind Elemente wie span (), Zeilenumbrüche (), starke Betonung () oder Kursiv ().
Wo schwimmen sie?
Sie können Elemente nach rechts oder links verschieben. Jedes Element, das dem schwimmenden Element folgt, wird auf der anderen Seite um das schwimmende Element herumfließen.
Wenn ich beispielsweise ein Bild nach links schwebe, wird Text und andere Elemente, die darauf folgen, nach rechts umflossen. Wenn ich ein Bild nach rechts schwebe, wird Text und andere Elemente, die darauf folgen, nach links umflossen. Ein Bild, das in einen Textblock eingefügt wird, ohne dass ein Float-Stil angewendet wurde, wird angezeigt. Der Browser ist jedoch so eingestellt, dass Bilder angezeigt werden. Dies ist normalerweise so, dass die erste Zeile des folgenden Textes unten im Bild angezeigt wird.
Wie weit werden sie schweben?
Ein Element, das verschoben wurde, wird so weit wie möglich nach links oder rechts vom Containerelement verschoben. Dies führt zu verschiedenen Situationen, abhängig davon, wie Ihr Code geschrieben wird. Für diese Beispiele schwebe ich ein kleines DIV Element nach links:
- Wenn das Floating-Element keine vordefinierte Breite hat, nimmt es unabhängig vom Float so viel horizontalen Platz wie erforderlich und zur Verfügung. Hinweis: Einige Browser versuchen, Elemente neben Float-Elementen zu platzieren, wenn die Breite nicht definiert ist. Dies gibt dem nicht Float-Element normalerweise nur wenig Platz. Deshalb solltest du Definiere immer eine Breite auf schwebenden Elementen.
- Wenn das Containerelement das HTML-Element ist, wird das Floating-Element verschoben
DIVwird am linken Rand der Seite angezeigt. - Wenn das Containerelement selbst in einem anderen Element enthalten ist, wird das Element verschoben
DIVwird am linken Rand des Containers sitzen. - Sie können schwebende Elemente verschachteln, was dazu führen kann, dass der Schwimmer an einem überraschenden Ort landet. Zum Beispiel handelt es sich bei diesem Float um einen Left Float
DIVin einem rechten schwebteDIV. - Schwebende Elemente sitzen nebeneinander, wenn im Container Platz ist. Dieser Container hat beispielsweise drei 100px-Breite
DIVElemente schwebten in einem 400px breiten Container.
Sie können sogar Floats verwenden, um ein Fotogalerie-Layout zu erstellen. Sie fügen jedes Miniaturbild (es funktioniert am besten, wenn sie alle die gleiche Größe haben) in ein DIV mit der Bildunterschrift und dem Float der DIV Elemente im Behälter. Egal wie breit das Browserfenster ist, die Miniaturansichten werden gleichmäßig ausgerichtet.
Ausschalten des Schwimmers
Sobald Sie wissen, wie Sie ein Element zum Floaten bringen, ist es wichtig zu wissen, wie Sie den Float ausschalten. Sie deaktivieren den Float mit der CSS-Clear-Eigenschaft. Sie können linke Schwimmer, rechte Schwimmer oder beides löschen:
klar: links;klar: richtig;Lösche beide;
Jedes Element, für das Sie die clear -Eigenschaft festlegen, wird unter einem Element angezeigt, das in diese Richtung verschoben wird. In diesem Beispiel werden beispielsweise die ersten beiden Absätze des Texts nicht gelöscht, der dritte jedoch.
Spielen Sie mit dem klaren Wert verschiedener Elemente in Ihren Dokumenten, um unterschiedliche Layouteffekte zu erhalten. Eines der interessantesten Float-Layouts ist eine Reihe von Bildern in der rechten oder linken Spalte neben Textabschnitten. Auch wenn der Text nicht lang genug ist, um am Bild vorbei zu scrollen, können Sie mit dem Löschen aller Bilder sicherstellen, dass sie in der Spalte und nicht neben dem vorherigen Bild angezeigt werden.
Der HTML-Code (wiederholen Sie diesen Absatz):
Duis auture irure dolor sed do eiusmod temporid in reprehenderit in voluptate. Cupidatat nicht Proident, Ut Labore und Dolore Magna Aliqua.
Das CSS (um die Bilder nach links zu verschieben):
img.float {float: left; klar: links; Marge: 5px;}
Und nach rechts:
img.float {float: right; klar: richtig; Marge: 5px;}
Floats für das Layout verwenden
Sobald Sie verstehen, wie das schweben Wenn die Eigenschaft funktioniert, können Sie damit beginnen, Ihre Webseiten zu gestalten. Dies sind die Schritte, die ich zum Erstellen einer Floated-Webseite befolge:
- Gestalten Sie das Layout (auf Papier oder in einem Grafiktool oder in meinem Kopf).
- Bestimmen Sie, wo die Seiteneinteilungen sein werden.
- Bestimmen Sie die Breite der verschiedenen Container und der darin enthaltenen Elemente.
- Schwebe alles. Sogar das äußerste Containerelement wird nach links verschoben, sodass ich weiß, wo es sich in Relation zum Browseransicht-Port befindet.
Solange Sie die Breiten (Prozentsätze sind in Ordnung) Ihrer Layoutabschnitte kennen, können Sie das verwenden schweben Eigenschaft, um sie dort zu platzieren, wo sie auf die Seite gehören. Und das Schöne ist, Sie müssen sich nicht so viele Gedanken darüber machen, ob das Box-Modell für Internet Explorer oder Firefox unterschiedlich ist.
