Kurs HTML

Wprowadzenie: Układy opływające

Właściwość float w CSS była pierwotnie zaprojektowana, aby umożliwić tekstowi opływanie obrazków, podobnie jak w gazetach czy magazynach. Element, któremu nadano float, jest wyjmowany z normalnego przepływu dokumentu i przesuwany maksymalnie w lewo (float: left;) lub w prawo (float: right;) wewnątrz swojego kontenera nadrzędnego.

Otaczająca treść (inne elementy blokowe lub tekst) "opływa" sfloatowany element, wypełniając dostępną przestrzeń obok niego.

Właściwość clear służy do kontrolowania tego opływania, pozwalając określić, że dany element ma się pojawić poniżej wszystkich sfloatowanych elementów po określonej stronie.

Choć float był kiedyś powszechnie używany do tworzenia całych layoutów (np. kolumn), obecnie do tego celu preferuje się nowocześniejsze techniki jak Flexbox i Grid. Jednak float nadal jest przydatny w specyficznych przypadkach, zwłaszcza przy opływaniu obrazków przez tekst.

Właściwość float

Właściwość float może przyjmować następujące wartości:

• left: Element jest przesuwany w lewo, a otaczająca treść opływa go z prawej strony.
• right: Element jest przesuwany w prawo, a otaczająca treść opływa go z lewej strony.
• none: Wartość domyślna. Element pozostaje w normalnym przepływie dokumentu.
• inline-start / inline-end: Wartości logiczne, zależne od kierunku tekstu (LTR/RTL).

Kluczowe cechy elementu sfloatowanego:

• Jest wyjmowany z normalnego przepływu (podobnie jak przy position: absolute), ale inne treści (tekst, elementy inline) go opływają.
• Staje się elementem blokowym (jeśli nim nie był), co oznacza, że można mu nadać width, height, margin, padding.
• Jego kontener nadrzędny (jeśli nie ma ustalonej wysokości) może "zapaść się" (collapse), ponieważ sfloatowany element nie wpływa na jego wysokość w normalnym przepływie. Jest to częsty problem wymagający rozwiązania (np. za pomocą clear lub technik "clearfix").

<div class="container">
  <img src="obrazek.jpg" alt="Przykładowy obrazek" class="floated-left">
  <p>To jest tekst, który będzie opływał obrazek znajdujący się po lewej stronie. Tekst wypełni dostępną przestrzeń obok obrazka, a gdy obrazek się skończy, tekst zajmie całą szerokość kontenera.</p>
  <p>Kolejny akapit tekstu, który również będzie opływał obrazek.</p>
</div>Kopiuj

.container {
  width: 400px;
  border: 1px solid gray;
  padding: 10px;
}

.floated-left {
  float: left;
  width: 100px; /* Szerokość obrazka */
  height: auto;
  margin-right: 15px; /* Odstęp między obrazkiem a tekstem */
  margin-bottom: 5px; /* Odstęp poniżej obrazka */
}

p {
    line-height: 1.5;
}Kopiuj

W powyższym przykładzie obrazek zostanie przesunięty w lewo, a tekst w paragrafach będzie go opływał z prawej strony.

Właściwość clear

Właściwość clear jest używana na elemencie, który ma nastąpić **po** elemencie sfloatowanym. Określa ona, po której stronie (lub obu) ten element **nie może** mieć sąsiadujących elementów sfloatowanych. Efektywnie, element z clear zostanie przesunięty w dół, poniżej wszystkich sfloatowanych elementów po wskazanej stronie.

Właściwość clear może przyjmować następujące wartości:

• left: Element zostanie przesunięty poniżej wszystkich elementów sfloatowanych w lewo (float: left;).
• right: Element zostanie przesunięty poniżej wszystkich elementów sfloatowanych w prawo (float: right;).
• both: Element zostanie przesunięty poniżej wszystkich sfloatowanych elementów, zarówno lewych, jak i prawych. Jest to najczęściej używana wartość.
• none: Wartość domyślna. Element nie jest przesuwany i może sąsiadować ze sfloatowanymi elementami.
• inline-start / inline-end: Wartości logiczne.

<div class="container">
  <div class="box floated">Float Left</div>
  <p>Ten tekst opływa.</p>
  <div class="footer">Stopka - poniżej float.</div>
</div>Kopiuj

.container {
  border: 1px solid gray;
  padding: 10px;
}

.box {
    width: 80px; height: 80px; background: lightcoral; margin: 5px;
}

.floated {
  float: left;
}

.footer {
  clear: left; /* Lub clear: both */
  background: lightblue;
  padding: 5px;
  margin-top: 10px;
}
/* Bez clear: left;, stopka próbowałaby opłynąć .floated */Kopiuj

W tym przykładzie, dzięki clear: left;, element .footer pojawi się zawsze poniżej elementu .floated, nawet jeśli byłoby obok niego miejsce.

Problem zapadającego się rodzica i technika "clearfix"

Jak wspomniano, gdy kontener zawiera tylko elementy sfloatowane (lub głównie sfloatowane), jego wysokość może "zapaść się" do zera, ponieważ elementy sfloatowane są wyjęte z normalnego przepływu i nie wpływają na obliczanie wysokości rodzica.

Aby temu zapobiec, stosuje się różne techniki "clearfix". Najpopularniejsza nowoczesna metoda polega na użyciu pseudoelementu ::after na kontenerze:

.clearfix::after {
  content: ""; /* Wymagane dla pseudoelementu */
  display: table; /* Lub display: block */
  clear: both; /* Kluczowa właściwość - czyści floaty wewnątrz kontenera */
}Kopiuj

<div class="container clearfix"> 
  <div class="box floated">Float 1</div>
  <div class="box floated">Float 2</div>
  <!-- Kontener się nie zapadnie dzięki .clearfix::after -->
</div>Kopiuj

Pseudoelement ::after jest dodawany na końcu kontenera, ma ustawione clear: both;, co zmusza go do pojawienia się poniżej wszystkich wewnętrznych floatów, a tym samym "rozciąga" kontener, aby je objął.

Inną, prostszą metodą (choć tworzącą nowy kontekst formatowania, co może mieć inne skutki uboczne) jest ustawienie overflow: auto; lub overflow: hidden; na kontenerze.

.container-overflow {
  overflow: auto; /* Lub hidden - również zapobiega zapadaniu się */
  border: 1px solid green;
  padding: 10px;
}

.container-overflow .floated {
    float: left;
    width: 50px; height: 50px; background: lightgreen; margin: 5px;
}Kopiuj