очищенные поплавки, толкающие вниз

Question

Я заметил раздражающую вещь с конкурирующими поплавками на противоположных сторонах страницы.

У меня есть два jsFiddles, чтобы проиллюстрировать мою проблему:

Fiddle A, Fiddle B

В Fiddle примере, вы можете увидеть, что изображение слева находится в верхней части и на том же уровне зеленый блок. В этом случае зеленые и синие дивы внутри контейнера:

<div class="floatContainer" style="float: right"> 
    <div>Green Div</div> 
    <div style="float: right; clear: right;"> 
     Blue Div 
    </div> 
</div> 

Проблемы у меня с этой раскладкой, что текст плотно не оборачивать в синий блок, как это оборачивать вокруг контейнера вместо.

В примере Fiddle B мне удалось получить завернутую обработку, не плавая в контейнере и плавая зеленые и синие divs индивидуально. Чтобы получить синий div ниже зеленого, на нем, конечно, есть ярлык «clear: right».

Однако вы можете видеть, что изображение слева теперь сдвинуто вниз, так что оно начинается с той же y-координаты, что и синий div, и это не то, что я хочу.

Итак, есть ли способ, чтобы текст обернулся вокруг зеленого и синего div отдельно, сохраняя при этом левое верхнее изображение правильно? Это похоже на ошибку CSS, поскольку это, конечно, не то поведение, которое я ожидал.

Спасибо.

Answer 1

Перемещение .floatContainer внутри .content, так что после <img>, так что он не очищается.

<div class="content"> 
    <img class="right" src="http://lorempixel.com/150/100" width="150" height="100"> 
    <div class="floatContainer"> 
     <div class="rightFloat">Stuff and things are long</div> 
     <div class="rightFloat second">More Things</div> 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit 

http://jsfiddle.net/gdFjy/3/