CSS Макет - clear и clearfix
CSS свойство clear
CSS свойство clear указывает ,какие элементы могут плавать рядом с очищенным элементом и с какой стороны.
CSS свойство clear может иметь одно из следующих значений:
none- разрешает плавающие элементы с обеих сторон. Это значение по умолчаниюleft- слева не допускаются плавающие элементыright- с правой стороны не допускаются плавающие элементыboth- плавающие элементы не допускаются ни с левой, ни с правой стороныinherit- элемент наследует чистое значение своего родителя
Наиболее распространенным способом использования для элемента CSS свойства clear является использование свойства float.
При очистке поплавка вы должны сопоставить свойства clear с float: если элемент перемещается влево, то вы должны очистить слева. Ваш плавающий элемент будет продолжать плавать, но очищенный элемент появится под ним на веб-странице.
Следующий пример очищает поплавок слева. Означает, что плавающие элементы не допускаются в левой части div:
div {
clear: left;
}
Попробуйте сами »
Оптимальное решение clearfix
Если элемент выше элемента, содержащего его, и он плавает, он будет "переполняться" за пределами своего контейнера:
Без clearfix
С clearfix
Затем мы можем добавить CSS свойство overflow: auto; в содержащий элемент, чтобы исправить эту проблему:
.clearfix {
overflow: auto;
}
Попробуйте сами »
CSS свойство overflow: auto clearfix работает хорошо, пока вы можете контролировать свои поля и отступы (иначе вы можете увидеть полосы прокрутки). Однако новый современный хак clearfix безопаснее в использовании, и следующий код используется для большинства веб-страниц:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Попробуйте сами »
Вы узнаете больше о псевдоэлементе ::after в следующей главе.