Картинки с обтеканием в контексте

Если в тексте возникает желание вставить картинку, которую должен обтекать текст, то вставляйте ее внутрь параграфа, а всем параграфам допишите свойство clear: both;. Тогда следующий параграф не будет обтекать эту флоатящуюся картинку и ломать красоту.

Также хорошим тоном считаю выставлять отступ (margin) после параграфа в одну высоту линии этого параграфа, тогда можно будет смело вставлять перенос строки <br/> и визуально высота отступа от двух переносов строки будет восприниматься также, как окончание параграфа. То есть глаз вашего читателя не будет шокирован набором разных по высоте отступов между текстом.

p {
    clear: both;
    font-size: 14px;
    line-height: 18px;
    margin: 0 0 18px;
}
p .floating-image {
    float: left;
    margin: 0 20px 18px 0;
}

Таким образом, можно смело ставить переносы строки, для визуального оформления текста плавающего вокруг картинки.

Не нужно для плавающих картинок создавать обертки в виде плавающих блоков — всё это лишние заморочки.