float

Die CSS Eigenschaft float platziert ein Element auf der linken oder rechten Seite seines Containers, so dass Text- und Inline-Elemente um das Element herum angeordnet werden k├Ânnen. Das Element wird aus dem normalen Fluss der Seite entfernt, bleibt aber dennoch ein Teil des Flusses (im Gegensatz zur absoluten Positionierung).

.

Ein Floating-Element ist ein Element, bei dem der berechnete Wert von float nicht none ist.

Da float die Verwendung des Blocklayouts impliziert, ├Ąndert es in einigen F├Ąllen den berechneten Wert der display Werte:

Spezifizierter Wert Berechneter Wert
inline block
inline-block block
inline-table table
table-row block
table-row-group block
table-column block
table-column-group block
table-cell block
table-caption block
table-header-group block
table-footer-group block
inline-flex flex
inline-grid grid
other unchanged
Hinweis: Wenn Sie diese Eigenschaft von JavaScript als Mitglied des HTMLElement.style Objektsreferenzieren, unterst├╝tzen moderne Browser float, aber in ├Ąlteren Browsern m├╝ssen Sie es als cssFloat buchstabieren, wobei Internet Explorer ab Version 8 und ├Ąlter styleFloat verwenden. Dies war eine Ausnahme von der Regel, dass der Name des DOM-Mitglieds der in camel case (Binnenmajuskel) geschriebene Name des durch Bindestriche getrennten CSS-Namens ist (aufgrund der Tatsache, dass "float" ein reserviertes Wort in JavaScript ist, was sich in der Notwendigkeit zeigt, "class" als "className" und <label>'s "for" als "htmlFor" zu maskieren).

Syntax

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: unset;

The float property is specified as a single keyword, chosen from the list of values below.

Values

none
Standardwert. Das Element wird nicht umflossen.
left
Das Element wird nach links ger├╝ckt und die Inhalte des umliegenden Elements (containing block) werden rechts vom Element angeordnet.
right
Das Element wird nach rechts ger├╝ckt und die Inhalte des umliegenden Elements (containing block) werden links vom Element angeordnet.
inline-start
Das Element muss auf der Anfangsseite seines enthaltenden Blocks flie├čen. Das ist die linke Seite bei ltr Richtungen und die rechte Seite bei rtl-Richtungen.
inline-end

Das Element muss auf der Endseite seines enthaltenden Blocks flie├čen. Das ist die rechte Seite bei ltr Richtungen und die linke Seite bei rtl-Richtungen.

inherit
Der Wert des Elternelements wird geerbt.
.

Formale Definition

Initialwertnone
Anwendbar aufalle Elemente, hat jedoch keinen Effekt, falls der Wert von display none ist
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

left | right | none | inline-start | inline-end

Beispiele

Wie flie├čende Elemente positioniert werden

Wie oben erw├Ąhnt, wird ein Element, wenn es flie├čend (floated) ist, wird es aus dem normalen Fluss des Dokuments herausgenommen (obwohl es immer noch Teil des Dokuments bleibt). Es wird nach links oder rechts verschoben, bis es die Kante seines Beh├Ąlters oder eines anderen schwebenden Elements ber├╝hrt.

In diesem Beispiel gibt es drei farbige Quadrate. Zwei davon sind nach links und eines nach rechts geschoben. Beachten Sie, dass das zweite "linke" Quadrat rechts vom ersten platziert wird. Weitere Quadrate w├╝rden weiter nach rechts gestapelt werden, bis sie den enthaltenden Kasten gef├╝llt haben, wonach sie in die n├Ąchste Zeile umbrechen w├╝rden.

Ein schwebendes Element ist mindestens so hoch wie seine h├Âchsten verschachtelten flie├čenden Kinder. Wir gaben dem Elternteil die Breite von 100% (width: 100%) und haben es flie├čen lassen, um sicherzustellen, dass es hoch genug ist, um seine flie├čenden Kinder zu umfassen, und um sicherzustellen, dass es die Breite des Elternteils einnimmt, damit wir sein benachbartes Geschwisterkind nicht ├╝berdecken m├╝ssen.

HTML

<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
     lectus vulputate. Donec id iaculis velit. Aliquam vel
     malesuada erat. Praesent non magna ac massa aliquet tincidunt
     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
</section>

CSS

section {
  border: 1px solid blue;
  width: 100%;
  float: left;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}

Ergebnis

Aufl├Âsung von floats

Manchmal m├Âchten Sie vielleicht erzwingen, dass ein Element unter alle schwebenden Elemente verschoben wird. Beispielsweise m├Âchten Sie vielleicht, dass Abs├Ątze neben den Flie├čkommazahlen bleiben, aber ├ťberschriften zwingen, auf ihrer eigenen Zeile zu stehen. Siehe clear f├╝r Beispiele.

Spezifikation

Spezifikation Status Kommentar
CSS Logical Properties and Values Level 1
Die Definition von 'float and clear' in dieser Spezifikation.
Bearbeiterentwurf Neue Werte inline-start und inline-end.
CSS Level 2 (Revision 1)
Die Definition von 'float' in dieser Spezifikation.
Empfehlung Keine Änderungen
CSS Level 1
Die Definition von 'float' in dieser Spezifikation.
Empfehlung Urspr├╝ngliche Deinition

Browser Kompatibilit├Ąt

BCD tables only load in the browser

Siehe auch