CSS Макет - float и clear
CSS свойство float определяет, как элемент должен располагаться (плавать) относительно других элементов.
CSS свойство clear определяет, какие элементы могут плавать рядом с очищенным (clear) элементом и с какой стороны.
Свойство float
Свойство float используется для позиционирования и форматирования содержимого, например когда изображение располагается слева от текста в контейнере.
Свойство float может иметь одно из следующих значений:
left- Элемент плавает слева от своего контейнера.right- Элемент плавает справа от своего контейнера.none- Элемент не плавает (будет отображаться именно там, где он встречается в тексте). Это по умолчаниюinherit- Элемент наследует float значение своего родителя
В простейшем случае свойство float можно использовать для обтекания текстом изображений.
Пример - float: right;
В следующем примере показано, что изображение должно располагаться (плавать) от текста справа:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Пример - float: left;
В следующем примере показано, что изображение должно располагаться (плавать) от текста слева:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Пример - No float
В следующем примере изображение будет отображаться именно там, где оно встречается в тексте (float: none;):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Пример - Элементы располагаются рядом друг с другом
Обычно элементы div отображаются друг над другом. Однако, если применяется float: left, то элементы располагаются рядом друг с другом:
Пример
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
Попробуйте сами »
