Нехай тепер у нас є див, у якому лежить
картинка. Диву задамо кордон, а картинці
поки не будемо ставити властивість float.
Давайте подивимося, як це виглядатиме у браузері:
<div>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
:
Тепер давайте встановимо картинці властивість
float в значенні left. В цьому
разі відбудеться дивовижна річ - висота
батька зникне, його нижня межа буде
починатися відразу після верхньої, а картинка
вилізе знизу за свого батька:
<div>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Виходить, що елементи, яким задано
властивість float, не розширюють свого
батька по висоті.
Давайте властивості float замість left
напишемо значення right. Поведінка
батька не зміниться, але картинка почне
плавати праворуч:
<div>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Задамо висоту
Хоча плаваючі елементи не розширюють свого
батьки по висоті, ми можемо самі поставити
йому висоту за допомогою властивості height.
Зробимо це:
<div>
<img src="img.png" alt="">
</div>
div {
height: 100px;
border: 1px solid red;
}
img {
float: right;
}
:
З текстом
Давайте приберемо властивість height для
дива і поставимо невеликий текст перед картинкою.
У цьому випадку висота нашого дива дорівнюватиме висоті тексту, а картинка, як і раніше, вилізе за див:
<div>
text
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Давайте поставимо текст після картинки - результат не зміниться:
<div>
<img src="img.png" alt="">
text
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Давайте зробимо так, щоб картинка плавала по лівому краю – результат буде аналогічним:
<div>
<img src="img.png" alt="">
text
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Давайте знизу додамо ще один див - картинка налізе і на нього:
<div>
<img src="img.png" alt="">
text
</div>
<div>
text
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Якщо ж в перший див додати настільки багато тексту, що по висоті він буде більший за картинку - вона не буде налазити на другий див:
<div>
<img src="img.png" alt="">
довгий текст
</div>
<div>
text
</div>
div {
text-align: justify;
border: 1px solid red;
}
img {
float: left;
}
:
Цей момент дуже важливий – при розробці може бути таке, що в якомусь блоці у вас досить багато тексту, а потім при реальній роботі сайту в цьому блоці буде менше тексту, ніж заплановано. Вийде, що в цьому випадку виявиться проблема з налазінням плаваючих елементи на сусідні блоки.