Latest web development tutorials

CSS Float (floating)

Was ist CSS Float (float)?



Die CSS-Float (floating), wird das Element nach links oder rechts bewegen, werden die Elemente um sie neu angeordnet werden.

Float (floating) wird häufig für Bilder verwendet, aber es ist sehr nützlich, wenn das gleiche Layout.

Wie floating Element

Horizontal Floating Element, bedeutet, dass das Element nur links bewegen kann und nach rechts und nicht nach oben und unten.

Ein schwimmendes Element wird versuchen, links oder rechts, bis seine Außenkante über die Grenze zu verschieben oder ein anderes schwimmende Box mit Box so weit.

Elemente nach dem Floating-Element wird auf sie konzentrieren.

Elemente vor dem Floating Element nicht beeinträchtigt werden.

Wenn das Bild rechts schwimmt, wird der folgende Text um die linke Seite fließen davon:

Beispiele

img
{
float:right;
}

Versuchen »

Schwimmelemente aneinander angrenzend

Wenn Sie ein paar Schwimmelemente zusammen setzen, wenn es Raum ist, wird es benachbart zueinander sein.

Hier nutzen wir die Eigenschaft float Bildergalerie:

Beispiele

.thumbnail
{
float: left;
Breite: 110px;
Höhe: 90px;
margin: 5px;
}

Versuchen »

Float - Benutzen Sie klare

Nachdem die Elemente um Elemente neu arrangiert, um dies zu vermeiden, schwimmend, verwenden Sie die Eigenschaft clear.

klar Attribut gibt das Element nicht auf beiden Seiten des Floating-Elements erscheinen.

Verwenden Sie Klartext-Eigenschaft auf ein Bild hinzufügen Galerie:

Beispiele

.text_line
{
clear:both;
}

Versuchen »

Beispiele

Weitere Beispiele

Das linke Bild hinzufügen , Ränder und Rahmen und schwimmt auf den Absatz

Lassen Sie uns Bild Ränder und Rahmen und Absatz Schwimmer auf der linken Seite hinzufügen

Titel und Bilder auf der rechten Seite Schwimmer

Lassen Sie den Titel und die Bilder auf der rechten Seite zu schweben.

Lassen Sie den ersten Buchstaben eines Absatzes Schwimmer nach links

Ändern Sie die Art, so dass der erste Buchstabe eines Absatzes Schwimmer nach links.

Hat nicht eine Seite mit einer Tabelle erstellen

Verwenden Sie Schwimmer einen Seite Header, Footer, links Inhalt und Inhalt zu erstellen.

Alle CSS-Eigenschaft float

"CSS" Spalte die Anzahl der verschiedenen Versionen von CSS (CSS1 oder CSS2) zeigt definiert die Eigenschaft.

属性 描述 值 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit		 1
float 指定一个盒子（元素）是否可以浮动。 left
right
none
inherit		 1