Float-блоки по углам контейнера c текстом вокруг

Перемещение изображения вправо или влево с обтеканием текста? Float-блок — это простая задача, но как насчет перемещения изображения в нижний левый или нижний правый угол.

На первый взгляд теперь это кажется сложной задачей, наверное, чтобы справиться с ней, может понадобиться JS?
На самом деле — нет, всё это легко делается с помощью всего нескольких строк CSS!

See this code Bottom corner floating on x.xhtml.ru.

Для внесения ясности разберем код.

<div class="wrapper">
  <div class="box">
    <div class="float"><img></div>
    Lorem ipsum dolor ...
  </div>
</div>
.wrapper {
    display:flex;
}
.float {
    float:right;
    height:100%;
    display:flex;
    align-items:flex-end;
    shape-outside:inset(calc(100% - 100px) 0 0);
}

[wrapper]

Основной div должен быть flexbox-контейнером. Flexbox позволяет полагаться, по умолчанию, на выравнивание по растяжению чтобы иметь возможность использовать height:100%.

[box]

Это flex-элемент и здесь ему не нужен какой-либо конкретный CSS. Этот элемент будет определять высоту своего контейнера (wrapper) и, поскольку это flex-элемент, он будет растянут до своей собственной высоты. При растяжении такое поведение даст эталонную высоту, которую могут использовать дочерние элементы.

Из спецификации:

If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.

[float]

«Плавающий» float-элемент рядом с текстовым содержимым, благодаря сложному вычислению высоты, будет занимать всю высоту. Внутри этого элемента изображение перемещается вниз с помощью flexbox. До сих пор ничего сложного и код должен выдавать следующее:

float: right

Теперь немного магии с помощью css-свойства shape-outside. CSS-свойство shape-outside определяет произвольную фигуру, которую обтекает соседнее содержимое. По умолчанию это содержимое обтекает по внешней границе, с учётом margin. shape-outside предоставляет возможность настроить обтекание текстом объекты сложной формы.

inset() определяет область вставленного прямоугольника. Первые четыре аргумента представляют собой верхнее, правое, нижнее и левое смещения внутрь от ссылочного блока, которые определяют расположение краев вставленного прямоугольника.

Итак, с помощью shape-outside: inset(calc(100% - X) 0 0) создаётся вставка-прямоугольник, которая начинается точно в верхней части изображения, так как координата top будет равна 100% - X, где X — высота (height) изображения, а 100% — это высота float-элемента.

Такой трюк позволит тексту обернуть свободное пространство над изображением, т.е. плавающее изображение окажется прижатым к правому нижнему углу блока с текстом. С помощью значения float: left можно легко переместить изображение в левый нижний угол.

Используя вышесказанное, можно реализовать более необычные ситуации. Вот некоторые из них:

Картинка справа и посередине текста

See this code float in the middle on x.xhtml.ru.

4 картинки по углам блока с текстом

See this code 4 corners floating on x.xhtml.ru.

Скругленная картинка в правом нижнем углу

See this code rounded image on x.xhtml.ru.