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: hidden添加到statusBox

浮动元素不会影响父级的高度。由于两个元素都是浮动的，因此父元素没有高度。添加overflow: hidden更改。