float

float: none;

float: left;

float: right;

float: inline-start;

float: inline-end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">Float me</div>
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  text-align: left;
  width: 80%;
  line-height: normal;
}

#example-element {
  border: solid 10px #efac09;
  background-color: #040d46;
  color: white;
  padding: 1em;
  width: 40%;
}

Ein schwebendes 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 ein einzelnes Schlüsselwort angegeben, das aus der folgenden Liste von Werten ausgewählt wird.

left

Das Element muss auf der linken Seite seines enthaltenden Blocks schweben.

right

Das Element muss auf der rechten Seite seines enthaltenden Blocks schweben.

none

Das Element darf nicht schweben.

inline-start

Das Element muss auf der Startseite seines enthaltenden 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 enthaltenden 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 entfernt (bleibt jedoch Teil davon). Es wird nach links oder rechts verschoben, bis es den Rand seines umschließenden Kastens 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 weiterhin nach rechts gestapelt, bis sie den umschließenden Block füllen, woraufhin sie zur nächsten Zeile wechseln würden.

Ein schwebendes Element ist mindestens so hoch wie seine höchsten verschachtelten schwebenden Kinder. Wir haben dem Elternteil 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 einnimmt, damit wir seinen benachbarten Nachbarn nicht bereinigen 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, dass ein Element gezwungen wird, unterhalb schwebender Elemente platziert zu werden. Beispielsweise möchten Sie, dass Absätze neben Schwebeteilen bleiben, aber Überschriften in einer eigenen Zeile stehen. Siehe clear für Beispiele.

• Blockformatierungskontext
• Verwenden Sie clear, um ein Element zu zwingen, unter ein schwebendes Element zu verschieben.