Układ CSS - clear i clearfix

clear 属性

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear Właściwość może mieć jedną z następujących wartości:

  • none - pozwala na pływające elementy po obu stronach. Domyślna wartość
  • left - nie pozwala na pływające elementy po lewej stronie
  • right - nie pozwala na pływające elementy po prawej stronie
  • both - nie pozwala na pływające elementy po obu stronach
  • inherit - element dziedziczy wartość clear od swojego rodzica

użycie clear Najczęstszym użyciem właściwości jest użycie float po właściwości.

Podczas usuwania pływających elementów, powinno się dopasować je do pływających: jeśli element pływający znajduje się na lewo, należy zlikwidować lewo. Pływające elementy będą nadal płynąć, ale zlikwidowane elementy będą wyświetlane poniżej.

Poniższy przykład zlikwiduje lewe pływające elementy. Oznacza to, że na lewej stronie (div) nie mogą pojawiać się pływające elementy:

Przykład

div {
  clear: left;
}

Spróbuj sam

Hack clearfix

Jeśli element jest wyższy niż element go zawierający i jest płynny, będzie 'przelewał' się poza jego kontener:

Następnie możemy dodać overflow: auto; do elementu zawierającego, aby rozwiązać ten problem:

Przykład

.clearfix {
  overflow: auto;
}

Spróbuj sam

Jeśli możesz kontrolować marginesy zewnętrzne i wewnętrzne (w przeciwnym razie możesz zobaczyć paski przewijania), overflow: auto clearfix działa dobrze. Jednak nowoczesna technika clearfix hack jest bardziej bezpieczna, poniższy kod jest stosowany na większości stron internetowych:

Przykład

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Spróbuj sam

Nauczysz się tego w dalszych rozdziałach ::after Pseudoelementy.