Własność CSS clear

Własność CSS clear pozwala na określenie, z której strony dany element nie może być umieszczany obok poprzedzających go elementów pływających, znajdujących się w tym samym kontekście formatowania blokowego.

Własność ta działa zarówno na elementy niepływające, jak i pływające, tzn. za jej pomocą można na przykład zdecydować, że dany element pływający lub niepływający nie może mieć po jednej ze swoich stron lub po obu stronach żadnego elementu pływającego.

Wartości i składnia

Własność clear jako wartość przyjmuje jedno z następujących słów kluczowych:

left

Element nie może się znajdować obok elementów spływających do lewej.

right

Element nie może się znajdować obok elementów spływających do prawej.

both

Element nie może mieć obok siebie żadnych elementów pływających.

none

Oznacza, że element może być umieszczany obok elementów pływających z obu stron.

inline-start

Logiczna wartość kierunkowa oznaczająca, że element nie może znajdować się obok elementów spływających w kierunku krawędzi początkowej kontenera w orientacji śródliniowej. W przypadku tekstów w języku polskim słowo to jest równoważne ze słowem kluczowym left.

inline-end

Logiczna wartość kierunkowa oznaczająca, że element nie może znajdować się obok elementów spływających w kierunku krawędzi końcowej kontenera w orientacji śródliniowej. W przypadku tekstów w języku polskim słowo to jest równoważne ze słowem kluczowym right.

Własność clear a scalanie marginesów

W kwestii scalania marginesów elementy pływające z własnością clear zachowują się inaczej od elementów niepływających z własnością clear.

Jeśli element pływający ma zdefiniowaną własność clear o innej wartości niż none, to jego marginesy pionowe nie podlegają scalaniu. Spójrz na poniższy przykład:

<style>
#a {
  border: 4px dashed red;
  height: 100px;
  width: 300px;
  margin: 0 0 40px 0;
  float: left;
}
#b {
  height: 100px;
  width: 300px;
  border: 4px solid black;
  margin: 40px 0 0 0;
  float: left;
  clear: left;
}
</style>
...
<div id=&a&></div>
<div id=&b&></div>

W tym przykładzie element a ma 40-pikselowy margines dolny, a element b ma 40-pikselowy margines górny. Jako że element b jest elementem pływającym z własnością clear o wartości left, to zostanie on umieszczony pod elementem a i marginesy tych dwóch elementów zostaną zsumowane, dając w sumie 80 pikseli odstępu. Widać to na poniższym zrzucie ekranu.

Gdyby natomiast element b nie był elementem pływającym (nie miał własności float lub miał ją ustawioną na none), to jego górny margines uległby scaleniu z dolnym marginesem elementu a i przestrzeń między tymi dwoma elementami miałaby tylko 40 pikseli szerokości, jak widać na poniższym zrzucie ekranu.

Więcej przykładów pozycjonowania elementów pływających znajduje się na stronie Pozycjonowanie elementów w CSS w sekcji Pozycjonowanie pływające.

Podsumowanie