Удаление переполнения: скрытые изменения макета

Question

Макет, созданный с использованием HTML и стиля ниже, стал беспорядок после переполнения: скрытый от первого контейнера <div> был удален (так что выражения MathJax не были обрезаны). Я не могу найти простое решение, и я буду благодарен за любую помощь.

HTML:

<div class="c0"> 
    <div class="d01"> 
    This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. 
    </div> 
    <div class="d02"> 
    This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. 
    </div> 
</div> 
<div class="c1"> 
    <div class="d02"> 
    Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. 
    </div> 
    <div class="d02"> 
    Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. 
    </div> 
    <div class="d01"> 
    Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. 
    </div> 
</div> 

Стиль:

.c0 { background-color:#FF00FF; width:500px; margin: 0 auto; 
position: relative; overflow:hidden; } 

.d01 { background-color:#00FFFF; width:250px; float:right; margin-top: 3em; } 

.d02 { background-color:#006666; width:150px; float:left; margin-top: 1em; } 

.c1 { background-color:#666666; width:600px; margin: 0 auto; overflow:hidden; } 

Answer 1

, если вы не хотите, чтобы держать overflow:hidden; СВОЙСТВ, которым вызывает макет рассчитываться с учетом содержащий плавающий элемент, вы может использовать другое значение: overflow:auto; или использовать другую технику.

overflow:auto/*hidden*/;, display:inline-block/*inline-table/table/table-cell*/;, float:left/*right*/; триггеры макета.

Иначе вы можете добавить последний дополнительный элемент или псевдо-элемент отображается неinline с clear:both/*right/left*/;, это communly называемый метод clearfix.

какое-то объяснение здесь: http://css-tricks.com/all-about-floats/

Answer 2

использование clear:both; и это будет исправлено