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

将每篇文章设置为内联块（并赋予其全宽）可能有效：

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