Elementy pływające

Elementy pływające – float CSS są jednym z podstawowych narzędzi w CSS do rozmieszczania elementów na stronie. Pomimo że współczesne techniki takie jak Flexbox i Grid CSS oferują bardziej zaawansowane metody zarządzania układem strony, float nadal jest użyteczny i warto go znać. W tym artykule wyjaśnię, czym jest właściwość float, jak działa i jak można zastosować ją w praktyce.

Co to jest `float`?

Właściwość float pozwala przesunąć element na lewą lub prawą stronę kontenera, co pozwala innym elementom tekstowym i inline na opływanie go.

selektor { float: wartość; }

Float może przyjmować wartości:

left – element jest przesuwany na lewą stronę kontenera.
right – element jest przesuwany na prawą stronę kontenera.
none – domyślna wartość, element nie pływa.
inherit – wartość jest dziedziczona po rodzicu.

Przykłady zastosowania `float`

Opływanie elementu

Rozważmy prosty przykład, w którym przesuwamy obrazek na lewą stronę tekstu.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Float Example</title>
  <style>
    .float-left {
      float: left;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <img src="example.jpg" alt="Example Image" class="float-left">
  <p>To jest przykładowy tekst, który opływa obrazek. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.</p>
</body>
</html>

To jest przykładowy tekst, który opływa obrazek. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

Kolumny przy użyciu `float`

Możemy również użyć float do tworzenia kolumn. Poniższy przykład pokazuje, jak stworzyć dwie kolumny pływające obok siebie.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Float Columns</title>
  <style>
    .column {
      float: left;
      width: 45%;
      margin-right: 5%;
      background: aqua;
    }

    .column:last-child {
      margin-right: 0;
      background: blue;
    }

    .container {
      overflow: hidden; /* Clear floats */
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">
      <p>Kolumna 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="column">
      <p>Kolumna 2: Vivamus lacinia odio vitae vestibulum vestibulum.</p>
    </div>
  </div>
</body>
</html>

Kolumna 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Kolumna 2: Vivamus lacinia odio vitae vestibulum vestibulum.

Zarządzanie pływaniem: Clear

Aby zapobiec, że następne elementy pływają wokół elementów pływających, możemy użyć właściwości clear.

Właściwość `clear`

Właściwość clear pozwala na zakończenie pływania elementów. Ma następujące wartości:

none – właściwość nieaktywna (domyślne).
both – element będzie poniżej elementu pływającego.
left – element będzie poniżej elementu pływającego, umożliwia opływanie z prawej strony.
right – element będzie poniżej elementu pływającego, umożliwia opływanie z lewej strony.

Przykład użycia `clear`

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clear Example</title>
  <style>
    .float-left {
      float: left;
      width: 50px;
      height: 50px;
      background-color: lightblue;
      margin-right: 10px;
    }

    .clear-both {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="float-left"></div>
  <div class="float-left"></div>
  <div class="clear-both"></div>
  <p>Ten tekst zaczyna się poniżej pływających elementów.</p>
</body>
</html>

Ten tekst zaczyna się poniżej pływających elementów.

Czyszczenie opływania

Kiedy używamy float, otaczające elementy mogą owinąć się wokół elementów pływających, co może wpływać na układ strony. Aby tego uniknąć, możemy użyć techniki czyszczenia floatów.

Metoda clearfix

Jednym ze sposobów jest zastosowanie techniki clearfix.

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