Проникнення плаваючих елементів через теги в CSS

Проникнення плаваючих елементів через теги в CSS

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

Наявність тегів, наприклад p, не заважає обтіканню. Текст усередині цих тегів буде обходити елемент із float.

Приклад із декількома абзацами

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

  <p>
    some long text
  </p>

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

div {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}

img {
  float: left;
}

Проблема з коротким текстом

Якщо в першому абзаці мало тексту, висоти рядків може бути недостатньо, щоб обійти картинку повністю.

У такому випадку плаваюча картинка може зайти на наступний абзац.

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

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

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

div {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}

img {
  float: left;
}

Чому це відбувається

• float виводить елемент із нормального потоку документа.
• Інші елементи продовжують займати доступний простір.
• Обтікання працює для всього контейнера, а не тільки одного абзацу.

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