css - 响应式设计和clearfix

Question

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

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

如您所见，问题是我在主区域内有一个也使用 clearfix 的对象列表，并且第一个元素一直清除对象，直到侧边栏结束。我想要的是它看起来与 .block 的其余部分完全一样

我怎样才能做到这一点？

Answer 1

Forked your fiddle with fixed code.

你的 .main 元素需要知道它有一个单独的“格式化上下文”，这样它的子元素就可以忽略外部布局流:在符合标准的浏览器中做到这一点的唯一方法是使用溢出:隐藏:

.main {
    overflow: hidden;
}

顺便说一句，你可以去掉 .main 上的边距，它会自动占据剩余的空间(所以你可以将 aside 的宽度更改为你认为合适，甚至添加额外的列)——然后我给 aside margin-left: 10px 来指定保持布局不变所需的间隙。