响应式设计和clearfix

Question

我有一个页面的响应式布局。 <aside>具有恒定宽度，.main区域具有margin-right。我这样做是因为我希望.main区域适应不同的设备，而<aside>保持不变。

http://jsfiddle.net/c6mZN/1/

正如您所看到的，问题是我在主区域内有一个对象列表，它也使用了clearfix，第一个元素一直清除对象，直到侧边栏结束。我想要的是它看起来与.block

的其余部分完全一样

我怎么能实现这个目标？

Answer 1

Forked your fiddle with fixed code.

您的.main元素需要知道它有一个单独的'格式化上下文'，这样它的子节点可以忽略外部布局流：在符合标准的浏览器中执行此操作的唯一方法是使用{{1} }：

overflow: hidden

顺便说一下，你可以摆脱.main { overflow: hidden; } 上的边距，它会自动占据剩余的空间（这样你就可以根据需要改变.main的宽度，甚至可以添加额外的列） - 然后我给了aside aside来指示保持布局不变所需的差距。