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>