Как предотвратить лишний нижний край при плавании изображения с текстом ⇐ Html

[Anonymous]

У меня есть блок, состоящий из изображения с обертыванием текста: < /p>

Код: Выделить всё

* * * T T T
* * * T T T
* * * T T T
T T T T T T

H H H

где * представляет изображение, t представляет текст, а H - заголовок, который следует за блоком текста/изображения.
Мне нужны правила CSS, которые удовлетворяют оба эти условия: < /p>

Текст должен плавать вокруг изображения, в то время как само изображение имеет право и нижняя накладка, чтобы не прилипать к нему текст. Между H и блоком текста/изображения контролируется исключительно маржинальной вершиной H. Тем не менее, я не могу решить проблему, когда текста недостаточно: < /li>
< /ol>

Код: Выделить всё

* * * T T T
* * * T T T
* * * T T T
* * *
* * *

H H H
< /code>
В этом случае маржа изображения не разрушается и вместо этого добавляет к маржинальной версии H, что создает нежелательное дополнительное пространство. < /p>
Как может Я достигаю желаемого поведения? = "Snippet-Code">
.container {
max-width: 600px;
margin-bottom: 30px;
font-family: Arial, sans-serif;
line-height: 1.6;
display: block;
}

.float-image {
float: left;
margin-right: 15px;
margin-bottom: 15px;
width: 150px;
height: auto;
}

.container::after {
content: "";
display: block;
clear: both;
}

.header {
margin-top: 30px;
}< /code>

[img]https://dummyimage.com/150x150/c6ff83/000000[/img]

This is an example of an image floated to the left with text wrapping around it.

Header

Подробнее здесь: https://stackoverflow.com/questions/794 ... -with-text