Режим отображения CSS - clear и clearfix

Рекомендации по курсу:

использование атрибут clear

использование атрибут определяет, какие элементы могут плавать около очищаемого элемента и по какой стороне.

  • атрибут может быть установлен одним из следующих значений:
  • none - разрешается浮动 элементов по обеим сторонам. Значение по умолчанию
  • left - не разрешается浮动 элементов слева
  • right - не разрешается浮动 элементов справа
  • both - не разрешается浮动 элементов по обеим сторонам

inherit - элемент наследует значение clear от своего родительского элемента использование наиболее частое использование которого - это использование атрибут после атрибута.

При清除 плавающих элементов, следует соответствовать-clear и плаванию: если элемент плавает влево, то следует очистить левую сторону. Ваш плавающий элемент продолжит плавать, но очищенный элемент будет отображаться под ним.

Ниже приведен пример, который очищает плавающий влево. Это означает, что на левом крае (div) не должно быть плавающих элементов:

Пример

div {
  clear: left;
}

Попробуйте сами

clearfix Hack

Если элемент выше, чем содержащий его элемент, и он плавающий, он 'переполнится' за пределы своего контейнера:

Затем мы можем добавить overflow: auto; к контейнерам, чтобы решить эту проблему:

Пример

.clearfix {
  overflow: auto;
}

Попробуйте сами

Если вы можете контролировать внешние и внутренние отступы (в противном случае вы можете увидеть полосы прокрутки), overflow: auto clearfix будет хорошо работать. Однако, новый современный clearfix hack более безопасен, и следующий код используется большинством сайтов:

Пример

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

Попробуйте сами

Вы узнаете об этом позже в главе ::after Дробные элементы.