Макет CSS - плавающий и прозрачный
Свойство CSS floatуказывает, как элемент должен плавать.
Свойство CSS clearуказывает, какие элементы могут плавать рядом с очищенным элементом и с какой стороны.
Свойство float
Это floatсвойство используется для позиционирования и форматирования содержимого, например, позволяет изображению плавать слева от текста в контейнере.
Свойство floatможет иметь одно из следующих значений:
-
left- Элемент плавает слева от своего контейнера -
right- Элемент плавает справа от своего контейнера -
none- Элемент не плавает (будет отображаться только там, где он встречается в тексте). Это по умолчанию -
inherit- Элемент наследует значение с плавающей запятой своего родителя
В самом простом случае это floatсвойство можно использовать для переноса текста вокруг изображений.
Пример - поплавок: вправо;
В следующем примере показано, что изображение должно перемещаться вправо в тексте:
Сама боль и есть любовь, главная система хранения. Phasellus imperdiet, нет, как иногда говорили, но отсутствие ненависти Меценат — фанатик, мстительный и не стряпчий, автор массовой жизни.
Пример
img {
float: right;
}
Пример - поплавок: влево;
В следующем примере показано, что изображение должно перемещаться влево в тексте:
Сама боль и есть любовь, главная система хранения. Phasellus imperdiet, нет, как иногда говорили, но отсутствие ненависти Меценат — фанатик, мстительный и не стряпчий, автор массовой жизни.
Пример
img {
float: left;
}
Пример — нет поплавка
В следующем примере изображение будет отображаться именно там, где оно встречается в тексте (float: none;):
Сама боль и есть любовь, главная система хранения. Phasellus imperdiet, нет, как иногда говорили, но отсутствие ненависти Меценат — фанатик, мстительный и не стряпчий, автор массовой жизни.
Пример
img {
float: none;
}
Пример — плавающие рядом друг с другом
Обычно элементы div отображаются друг над другом. Однако, если мы используем float: left, мы можем позволить элементам плавать рядом друг с другом:
Пример
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}