Clearfixing плавает внутри контейнера, но игнорирует поплавки вне контейнера?

Question

У меня есть следующая структура HTML:

%aside.sidebar

%main

  %article
    %h2
    %aside.picture
      %img
    %p

  %article
    %h2
    %aside.picture
      %img
    %p

(Если вы не знакомы с HAML: приведенная выше структура представляет собой дерево HTML. %aside.picture средства <aside class='picture'>.)

Боковая панель высокая и плавает влево.

В статьях изображения также всплывают влево.

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

Пожалуйста, посмотрите на демо: http://sassmeister.com/gist/9173268

Заметьте, что в первой статье clearfix сделал его таким же высоким, как и боковая панель. Но я хочу, чтобы он рос так же высоко, как изображение.

PS overflow: hidden Делает ли это трюк, но давайте предположим, что статья содержит всплывающие элементы, которые должны иметь возможность появляться за пределами своих контейнеров?

Answer 1

Установка каждой статьи в inline-block (и придание ей полной ширины) может работать:

article {
  display: inline-block;
  width: 100%;
}

http://jsfiddle.net/vKF83/

Answer 2

Ответ Pixel работает на вашей демонстрационной ссылке: http://sassmeister.com/gist/9173268

Просто вставьте в окно Sass следующее в селекторе статей (без точек с запятой):

display: inline-block
width: 100%

Вы также можете указать высоту, если хотите, конечно, в этом же блоке:

height: 300px