響應式設計和clearfix

Question

我有這個響應式頁面佈局。該<aside>是恆定的寬度和.main面積有margin-right。我這樣做是因爲我想讓.main區域適應不同的設備，而<aside>保持不變。

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

的問題，正如你所看到的，是我的主要區域對象的列表，還可以使用clearfix內，並且第一個元素清除對象一路直到的結束側邊欄。我想要的是，它看起來完全像其餘的.block

我怎麼能做到這一點？

Answer 1

Forked your fiddle with fixed code.

你.main元素需要知道它有一個單獨的「格式化內容」，使得其子女可以忽略外部佈局流程：在符合標準的瀏覽器來做到這一點的唯一方法是使用overflow: hidden：

.main { 
    overflow: hidden; 
} 

順便說一句，你就可以得到上.main擺脫保證金的，它會自動佔據留下任何空間（這樣你就可以改變的aside寬度，你認爲合適，甚至可以添加額外的列） - 然後我給了asidemargin-left: 10px來規定它需要保持你的佈局不變的差距。