html - 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 使其与侧边栏一样高。但我只希望它长得和图像一样高。

附言 overflow: hidden这样做的技巧，但让我们假设文章包含应该能够出现在其容器之外的弹出元素？

Answer 1

将每篇文章设置为内联 block (并赋予其全宽)可能会起作用:

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

http://jsfiddle.net/vKF83/