CSS класс не наследует

Question

У меня есть блог кода, написанного, например, как это:

<div class="box"> 
    <div class="statusbox"> 
     <div class="cleft">some stuff</div> 
     <div class="cright">some more stuff</div> 
    </div> 
</div> 

и это CSS-код для него:

.box{padding:10px; border: 1px black solid;width: inherit;} 
.statusbox{border-bottom: 2px #736f6e solid;} 
.cleft{float:left;width:84%;vertical-align:middle;min-height:50px;margin-right:10px;padding-top: 5px;} 
.cright{float:right;width:15%;text-align:right;vertical-align:middle;min-height:50px;padding-top: 5px;} 

Проблема у меня в том, что структура не выполняется в соответствии с макетом CSS. Пока cleft и cright отображаются правильно, они не внедряются в пределах statusbox и box. box и statusbox просто собираются вместе, чуть выше «некоторых вещей».

Вот образ того, что я в настоящее время получаю:

Answer 1

Добавить overflow: hiddenstatusBox в

плавал элементы не способствуют высоте родителя. Поскольку оба элемента перемещены, родитель не имеет высоты. Добавление overflow: hidden изменяет это.