Плаваючі елементи під тегами в CSS

Плаваючі елементи під тегами в CSS

При роботі з float важливо розуміти порядок HTML-елементів. Плаваючий елемент впливає тільки на ті елементи, які знаходяться після нього в коді.

Картинка всередині першого абзацу

Спочатку розглянемо випадок, коли картинка знаходиться всередині першого абзацу та має float: right.

<div>
  <p>
    <img src="img.png" alt="">
    Lorem ipsum dolor sit amet,
    consectetur adipiscing elit.
  </p>

  <p>
    some long text
  </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 elit.
  </p>

  <img src="img.png" alt="">

  <p>
    some long text
  </p>
</div>

Картинка після всього тексту

Якщо перемістити картинку після другого абзацу, жоден текст не буде її обтікати.

<div>
  <p>
    Lorem ipsum dolor sit amet,
    consectetur adipiscing elit.
  </p>

  <p>
    some long text
  </p>

  <img src="img.png" alt="">
</div>

Головне правило float

• Елементи після float-елемента можуть його обтікати.
• Елементи перед float-елементом не реагують на нього.
• Порядок HTML-коду впливає на поведінку обтікання.
• float не повертає елемент назад у нормальний потік документа.

Практичне завдання

img {
  float: right;
}