Нехай зараз у нас є два абзаци та картинка,
розміщена у першому абзаці. Нехай цій картинці
у нас задана властивість float в значенні
right, а також напівпрозорість:
<div>
<p>
<img src="img.png" alt="">
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
довгий текст
</p>
</div>
div {
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: right;
opacity: 0.5;
}
:
А тепер давайте поставимо у HTML коді картинку після першого абзацу і подивимося, що буде:
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<img src="img.png" alt="">
<p>
довгий текст
</p>
</div>
div {
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: right;
opacity: 0.5;
}
:
Як бачимо, картинку обтікає текст другого абзацу, але не першого.
Давайте взагалі переставимо нашу картинку після другого абзацу. У цьому випадку вона плаватиме справа, але ніякого обтікання не буде:
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
довгий текст
</p>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: right;
opacity: 0.5;
}
:
Виходить, що обтікати картинку будуть тільки ті елементи, що знаходяться під нею, але не ті, що знаходяться над нею.