CSS / Pozycjonowanie
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).
- left - lewy bok elementu nie przylega do poprzedzającego elementu pływającego
- right - prawy bok nie przylega
- both - żaden bok nie przylega
- none - brak ograniczeń
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}

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

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

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

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