Przyleganie {clear}

Jak zabezpieczyć się przed nieestetycznym przyleganiem dwóch elementów oblewanych tekstem (np. obrazki)? W jaki sposób nie dopuścić, aby obok tekstu znajdował się obrazek ani inny element?

selektor { clear: sposób }

Polecenie można zastosować tylko do elementów wyświetlanych w bloku (block).

Polecenie pozwala ustalić pozycję elementów sąsiadujących względem elementu pływającego (np. obrazka). Określa które krawędzie elementu następującego po elemencie pływającym nie będą do niego przylegać.

Polecenia pozwalające sterować przyleganiem elementów są dosyć przydatne, chociaż początkowo może się tak nie wydawać. Na przykład umieszczamy na stronie opis poparty odpowiednimi ilustracjami, które mają być ułożone po prawej stronie względem otaczającego tekstu (float: right). Jeśli w kodzie źródłowym umieścimy obrazki zbyt blisko siebie, tzn. nie rozdzielimy ich odpowiednio długim tekstem opisu, nie zostaną one ułożone jeden pod drugim - tak jak prawdopodobnie oczekiwaliśmy - lecz obok siebie. Co więcej, ułożenie będzie zależało od rozdzielczości ekranu i rozmiarów okna przeglądarki (w mniejszej rozdzielczości wszystko może być w porządku). Aby pozbyć się tych niedogodności wystarczy dla obrazków określić dodatkowo deklarację: clear: right.

Przykład {clear}

<img style="float: left">

<p style="clear: left">Lewy bok tego akapitu nie przylega do obrazka</p>

<img style="float: left">

<p style="clear: right">Prawy bok tego akapitu nie przylega do obrazka</p>

<img style="float: left">

<p style="clear: both">Żaden bok tego akapitu nie przylega do obrazka</p>

<img style="float: left">

<p style="clear: none">Brak ograniczeń dotyczących przylegania</p>

Pytania i odpowiedzi

Co oznacza "clear" w CSS?

W CSS, właściwość clear jest używana do kontrolowania zachowania elementów wobec elementów, które zostały ustawione na float. Ustawiając "clear: left" lub "clear: right" można wymusić, aby element położony poniżej innych elementów z "float: left" lub "float: right" nie opływał ich z boku i zaczynał się od nowego wiersza.

Jak wyłączyć "float: left"?

Aby wyłączyć "float: left" ustawione wcześniej dla elementu w CSS, można użyć właściwości clear z wartością left na elemencie, który ma być wyczyszczony. To spowoduje, że element przestanie być położony obok innych elementów ustawionych na "float: left".

Kiedy używać "clear: both"?

Deklaracja "clear: both" jest używana w CSS, gdy chcemy wymusić, aby element położony poniżej innych elementów, które mogą być ustawione na "float: left" lub "float: right", nie opływał ich z boku i zaczynał się od nowego wiersza niezależnie od położenia innych elementów float. Jest to przydatne, gdy chcemy uniknąć zakłóceń spowodowanych elementami float, które mogą występować wizualnie nad innymi elementami.