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;
}
Спробуйте самі »
