float

Ein fließendes Element ist eines, bei dem der berechnete Wert von float nicht none ist.

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

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

/* Global values */
float: inherit;
float: initial;
float: revert;
float: revert-layer;
float: unset;

Die float-Eigenschaft wird als einzelnes Schlüsselwort angegeben, das aus der unten stehenden Liste ausgewählt wird.

left

Das Element muss auf der linken Seite seines umschließenden Blocks schweben.

right

Das Element muss auf der rechten Seite seines umschließenden Blocks schweben.

none

Das Element darf nicht schweben.

inline-start

Das Element muss auf der Startseite seines umschließenden Blocks schweben. Das ist die linke Seite bei ltr-Skripten und die rechte Seite bei rtl-Skripten.

inline-end

Das Element muss auf der Endseite seines umschließenden Blocks schweben. Das ist die rechte Seite bei ltr-Skripten und die linke Seite bei rtl-Skripten.

float = 
  block-start      |
  block-end        |
  inline-start     |
  inline-end       |
  snap-block       |
  <snap-block()>   |
  snap-inline      |
  <snap-inline()>  |
  left             |
  right            |
  top              |
  bottom           |
  none             |
  footnote         

<snap-block()> = 
  snap-block( <length> , [ start | end | near ]? )  

<snap-inline()> = 
  snap-inline( <length> , [ left | right | near ]? )  

Wie oben erwähnt, wird ein Element, wenn es schwebt, aus dem normalen Fluss des Dokuments genommen (bleibt aber dennoch ein Teil davon). Es wird nach links oder rechts verschoben, bis es den Rand seines umschließenden Rahmens oder ein anderes schwebendes Element berührt.

In diesem Beispiel gibt es drei farbige Quadrate. Zwei schweben nach links, und eines schwebt nach rechts. Beachten Sie, dass das zweite "linke" Quadrat rechts vom ersten platziert wird. Zusätzliche Quadrate würden sich weiterhin nach rechts stapeln, bis sie den umschließenden Rahmen füllen, danach würden sie in die nächste Zeile umgebrochen.

Ein schwebendes Element ist mindestens so hoch wie seine höchsten geschachtelten schwebenden Kinder. Wir haben dem Elternelement width: 100% gegeben und es schweben lassen, um sicherzustellen, dass es hoch genug ist, um seine schwebenden Kinder zu umfassen und um sicherzustellen, dass es die Breite des Elternteils ausfüllt, damit wir nicht sein angrenzendes Geschwisterelement löschen 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 {
  box-sizing: border-box;
  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

Manchmal möchten Sie ein Element dazu zwingen, unterhalb aller schwebenden Elemente zu erscheinen. Zum Beispiel möchten Sie möglicherweise, dass Absätze neben Floats bleiben, aber Überschriften auf ihrer eigenen Zeile stehen. Siehe clear für Beispiele.

• Blockformatierungskontext
• Verwenden Sie clear, um ein Element zu zwingen, unter einem geschwebten Element zu erscheinen.