Отзывчивый дизайн и 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, чтобы диктовать пробел, необходимый для поддержания постоянной компоновки.