CSS clear

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Co to jest clear w CSS?

clear to właściwość CSS używana razem z elementami pływającymi, czyli ustawionymi za pomocą float. Określa, czy dany element może znajdować się obok elementów pływających, czy ma zostać przeniesiony poniżej nich.

Najczęstsze wartości

  • clear: left; - element nie może znajdować się obok elementów z float: left
  • clear: right; - element nie może znajdować się obok elementów z float: right
  • clear: both; - element zostanie ustawiony poniżej elementów pływających z lewej i prawej strony
  • clear: none; - domyślne zachowanie, brak czyszczenia opływania

Przykład

.kolumna {
  float: left;
  width: 33%;
}

.stopka {
  clear: both;
}

W tym przykładzie trzy kolumny mogą ustawić się obok siebie dzięki float: left i width: 33%. Natomiast stopka z clear: both zostanie umieszczona pod kolumnami, a nie obok nich.

Ważne na egzaminie

clear nie służy do tworzenia kolumn obok siebie. Do tego używa się np. float, flexbox albo grid. Właściwość clear jest stosowana wtedy, gdy chcemy zakończyć działanie opływania i wymusić ustawienie kolejnego elementu pod elementami pływającymi.