4.4 KiB
title | localeTitle |
---|---|
Float and Clear | Float и Clear |
Float и Clear
Свойство CSS float
указывает, как элемент должен плавать.
Свойство CSS clear
указывает, какие элементы могут плавать рядом с очищенным элементом и с какой стороны.
Свойство float
Свойство float
используется для позиционирования и компоновки на веб-страницах.
Свойство float
может иметь одно из следующих значений:
left
- Элемент плавает слева от контейнера right
- Элемент плавает справа от контейнера none
- Элемент не плавает (будет отображаться только там, где он встречается в тексте). Это значение по умолчанию inherit
- элемент наследует значение float своего родителя В своем простейшем использовании свойство float
можно использовать для обертывания текста вокруг изображений.
Поплавок в картинке:
img {
float: right;
}
В этом примере указано, что изображение должно плавать вправо на странице:
img {
float: left;
}
В этом примере указано, что изображение должно плавать влево на странице:
img {
float: none;
}
В следующем примере изображение будет отображаться только там, где оно встречается в тексте ( float: none;
):
clear
собственность
Свойство clear
указывает, какие элементы могут плавать рядом с очищенным элементом и с какой стороны.
Свойство clear
может иметь одно из следующих значений:
none
- Позволяет плавающие элементы с обеих сторон. Это значение по умолчанию left
- плавающие элементы не разрешены с левой стороны right
- плавающие элементы не допускаются с правой стороны both
- не допускаются плавающие элементы на левой или правой стороне inherit
- элемент наследует четкое значение своего родителя Самый распространенный способ использования свойства clear
- после использования свойства float
для элемента.
При очистке поплавков вы должны сопоставлять clear
с float
. Если элемент перемещается left
, вы должны clear
его left
. Ваш плавающий элемент будет продолжать float
, но очищенный элемент появится под ним на веб-странице.
Пример:
div {
clear: left;
}
Дополнительные ресурсы:
- MDN CSS: Float & Clear
- Учебники W3Schools
- CSS-трюки: float & clear