Макет CSS - ясно и ясно
Чистое свойство
Когда мы используем это floatсвойство и нам нужен следующий элемент ниже (не справа или слева), нам придется использовать это clear
свойство.
Свойство clearуказывает, что должно произойти с элементом, который находится рядом с плавающим элементом.
Свойство clearможет иметь одно из следующих значений:
-
none- Элемент не помещается ниже левого или правого плавающего элемента. Это по умолчанию -
left- Элемент помещается ниже левого плавающего элемента -
right- Элемент помещается ниже правых плавающих элементов -
both- Элемент помещается ниже левого и правого плавающих элементов. -
inherit- Элемент наследует значение очистки от своего родителя
При очистке поплавков вы должны сопоставить очистку с поплавком: если элемент плавает влево, то вы должны очищать влево. Ваш плавающий элемент будет продолжать плавать, но очищенный элемент появится под ним на веб-странице.
Пример
Этот пример очищает поплавок слева. Здесь это означает, что элемент <div2> помещается ниже плавающего слева элемента <div1>:
div1 {
float: left;
}
div2 {
clear: left;
}
Взлом Clearfix
Если плавающий элемент выше содержащего его элемента, он «переполнится» за пределы своего контейнера. Затем мы можем добавить хак clearfix для решения этой проблемы:
Без Клирфикс
С Клирфикс
Пример
.clearfix {
overflow: auto;
}
The overflow: auto clearfix works well as long as you are able to keep control of your margins and padding (else you
might see scrollbars). The
new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
You will learn more about the ::after pseudo-element in a later chapter.