Dokumentacja CSS z przykładami: Float i clear

Q: Co robi clear?

clear przenosi element pod wszystkie wcześniejsze elementy pływające po wskazanej stronie: clear: left, clear: right albo clear: both. W ten sposób zatrzymujesz opływanie treścią elementu pływającego.

Co robi float

float spycha element na jedną stronę kontenera i pozwala następującemu po nim tekstowi go opływać:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Float</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .photo {
      float: left;
      width: 120px; height: 90px;
      margin: 4px 16px 8px 0;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo"></div>
  <p id="text">The box on the left is floated. This paragraph comes after it in the HTML, and its lines flow around the float instead of starting below it. Once the text passes the bottom of the float, the lines go back to the full width of the container, as you can see at the end of this paragraph when it is long enough to wrap below.</p>
</body>
</html>

Margines na pływającym pudełku sprawia, że tekst go nie dotyka. Marginesami sterujesz tym odstępem; samemu tekstowi nie da się nadać marginesu od strony elementu pływającego.

Wartości

Wartość	Wynik
`none` (domyślnie)	Brak float
`left`	Zepchnięty do lewej krawędzi
`right`	Zepchnięty do prawej krawędzi
`inline-start`	Zepchnięty na początek linii: w lewo po polsku, w prawo po arabsku albo hebrajsku
`inline-end`	Zepchnięty na koniec linii

inline-start i inline-end podążają za kierunkiem pisania, więc zbudowany z nimi układ poprawnie odwraca się na stronach pisanych od prawej do lewej. Element pływający staje się też blokiem: display: inline zamienia się w block, więc width i height działają nawet na span albo img.

Obrazki pływające w tekście

Klasyczne zastosowanie: obrazek w artykule, a wokół niego płynący tekst. Ustaw po jednym z każdej strony:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Floated images</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; font-size: 15px; }
    img { width: 110px; height: 80px; }
    .start { float: inline-start; margin-inline-end: 14px; }
    .end { float: inline-end; margin-inline-start: 14px; }
  </style>
</head>
<body>
  <p>
    <img class="start" alt="Blue square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%232563eb'/%3E%3C/svg%3E">
    This image floats to the start of the line. The text of the paragraph wraps around it on the other side, and continues under it once the image ends. Floats are still the simplest tool for this magazine style layout.
  </p>
  <p>
    <img class="end" alt="Amber square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%23f59e0b'/%3E%3C/svg%3E">
    This one floats to the end of the line instead. Change the direction of the page to right to left and both images switch sides with the text, because the floats use logical values.
  </p>
</body>
</html>

clear: koniec opływania

clear oznacza "zacznij pod wszystkimi wcześniejszymi elementami pływającymi po tej stronie". Użyj go na elemencie, który nie powinien stać obok elementu pływającego, na przykład na nagłówku następnej sekcji:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Clear</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .box { float: left; width: 110px; height: 110px; margin-inline-end: 12px; background: #bbf7d0; border: 2px solid #16a34a; }
    h3 { margin: 8px 0; padding: 4px 8px; background: #e5e7eb; }
    .cleared { clear: both; }
    .demo { display: flow-root; margin-bottom: 20px; } /* keeps the two demos apart */
  </style>
</head>
<body>
  <div class="demo">
    <div class="box" id="box1"></div>
    <p>A short paragraph next to the float.</p>
    <h3 id="h1">This heading is not cleared</h3>
  </div>
  <div class="demo">
    <div class="box" id="box2"></div>
    <p>A short paragraph next to the float.</p>
    <h3 class="cleared" id="h2">This heading has clear: both</h3>
  </div>
</body>
</html>

Pierwszy nagłówek wciska się obok elementu pływającego. Drugi zaczyna się pod nim. clear przyjmuje left, right, both, inline-start, inline-end i none.

Zapadający się rodzic i flow-root

Elementy pływające są poza zwykłym przepływem, więc kontener, którego wszystkie dzieci pływają, nie ma nic w przepływie i zapada się do zerowej wysokości. Jego tło i obramowanie kończą jako cienka linia nad elementami pływającymi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contain floats</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { border: 3px solid #dc2626; background: #fee2e2; margin-bottom: 110px; }
    .fixed { border-color: #16a34a; background: #dcfce7; margin-bottom: 0; }
    .child { float: left; width: 90px; height: 80px; margin: 6px; background: #fde68a; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent" id="broken">
    <div class="child">float</div><div class="child">float</div>
  </div>
  <div class="parent fixed" id="fixed">
    <div class="child">float</div><div class="child">float</div>
  </div>
</body>
</html>

display: flow-root tworzy nowy kontekst formatowania blokowego, który zawsze obejmuje swoje elementy pływające. Starszy kod używa do tego samego "clearfixa":

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

overflow: hidden albo auto też obejmuje elementy pływające, ale z efektem ubocznym w postaci przycinania; zobacz overflow.

Float nie służy do układu

Przed flexboxem i gridem całe układy stron budowano z pływających kolumn, z clearfixami i obliczaniem szerokości na każdym kroku. Ta epoka się skończyła: float nie potrafi wyśrodkować, nie wyrówna wysokości kolumn i psuje się, gdy treść zmienia rozmiar. Do rzędów i kolumn używaj display: flex albo display: grid, a float zostaw do opływania czegoś tekstem. Żeby wyśrodkować obrazek zamiast go opływać, zobacz, jak wyśrodkować obrazek.

Opływanie kształtu

shape-outside pozwala tekstowi podążać za kształtem zamiast za prostokątem elementu pływającego. Działa tylko na elementach pływających:

.avatar {
  float: left;
  width: 120px; height: 120px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-inline-end: 16px;
}

Częste błędy

Rodzic o zerowej wysokości. Wszystkie jego dzieci pływają. Dodaj display: flow-root.
Float do kolumn albo nawigacji. Użyj flexboxa albo grida.
Oczekiwanie float: center. Taka wartość nie istnieje. Wyśrodkuj flexboxem, gridem albo margin: 0 auto.
Treść po elemencie pływającym, która go opływa, choć nie powinna. Nadaj jej clear: both albo umieść element pływający i jego tekst w kontenerze flow-root.
Fizyczne left i right w wielojęzycznej witrynie. Użyj inline-start i inline-end, żeby układ odwracał się w językach pisanych od prawej do lewej.

Najczęściej zadawane pytania

Co robi float w CSS?

Wyjmuje element ze zwykłego przepływu i spycha go do lewej albo prawej krawędzi kontenera. Tekst i treść liniowa, które następują po nim, go opływają.

Co robi clear?

clear przenosi element pod wszystkie wcześniejsze elementy pływające po wskazanej stronie: clear: left, clear: right albo clear: both. W ten sposób zatrzymujesz opływanie treścią elementu pływającego.

Dlaczego rodzic elementu pływającego ma zerową wysokość?

Elementy pływające są poza zwykłym przepływem, więc rodzic, który ma tylko pływające dzieci, nie ma treści w przepływie i się zapada. Dodaj rodzicowi display: flow-root, a urośnie, żeby objąć swoje elementy pływające.

Co to jest clearfix?

Sztuczka, dzięki której rodzic obejmuje swoje elementy pływające, tradycyjnie pseudoelement ::after z clear: both. Dziś display: flow-root na rodzicu robi to samo w jednej linii.

Czy używać float do układu strony?

Nie. Float służył do kolumn, zanim powstały flexbox i grid. Do układu używaj flexboxa albo grida, a float zostaw do jego pierwotnego zadania: opływania tekstem obrazka albo wyróżnionego cytatu.

Powiązane zagadnienia