Clearfixing 在容器内浮动但忽略容器外的浮动？答案

【问题标题】：Clearfixing floats inside the container but ignoring floats outside the container?Clearfixing 在容器内浮动但忽略容器外的浮动？
【发布时间】：2014-03-25 02:44:22
【问题描述】：

我有以下 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 成功了，但我们假设文章包含应该能够出现在其容器之外的弹出元素？

【问题讨论】：

会溢出：自动工作吗？
你反对让侧边栏和你的主要元素一样高吗？
你想让每篇文章的文字留在图片的右边并创建一个列吗？（因此文本不只是像往常一样在浮动图像周围流动）

标签： html css sass clearfix

【解决方案1】：

将每篇文章设置为 inline-block（并赋予其全宽）可能会起作用：

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

http://jsfiddle.net/vKF83/

【讨论】：

【解决方案2】：

Pixel 的答案在您提供的演示链接中有效：http://sassmeister.com/gist/9173268

只需将以下内容放入您的 Sass 窗口中的文章选择器（不带分号）：

display: inline-block
width: 100%

如果你想当然也可以在同一块内指定高度：

height: 300px

【讨论】：