CSS Макет четкий и понятный

Свойство clear

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

Свойство clear может иметь одно из следующих значений:

• none - разрешает плавающие элементы с обеих сторон. Это значение по умолчанию
• left - слева не допускаются плавающие элементы
• right- с правой стороны не допускаются плавающие элементы
• both - плавающие элементы не допускаются ни с левой, ни с правой стороны
• inherit - элемент наследует чистое значение своего родителя

Наиболее распространенным способом использования свойства clear является использование свойства float для элемента.

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

Следующий пример очищает поплавок слева. Означает, что плавающие элементы не допускаются в левой части div:

Хак clearfix

Если элемент выше элемента, содержащего его, и он плавает, он будет "переполняться" за пределами своего контейнера:

Без Clearfix

С Clearfix

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

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