清除固定在容器内浮动，但忽略容器外的浮动

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

只需在文章选择器中输入以下内容（不带分号）：

display: inline-block
width: 100%

当然，如果您想在同一块中指定高度：

height: 300px