Html CSS类没有继承

我有一个写了如下代码的博客：

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

我遇到的问题是，在CSS布局方面没有遵守结构。虽然

cleft

和

cright

显示正确，但它们没有嵌入到

statusbox

和

box

中<代码>框和状态框只是聚集在一起，就在“一些东西”的上方

---

下面是我当前得到的图像：

添加

溢出：隐藏
到
状态框

浮动图元不会影响父图元的高度。因为两个元素都是浮动的，所以父元素没有高度。添加
overflow:hidden
会改变这一点。
将
overflow:hidden
添加到
statusBox

浮动图元不会影响父图元的高度。因为两个元素都是浮动的，所以父元素没有高度。添加
overflow:hidden
会改变这一点。
Peter-Paul-Koch（又名PPK）有一篇关于带溢出的清除浮动的好文章：我建议使用
overflow:auto
而不是
hidden
。这是给父元素分配子元素占用空间大小的常用方法。（我还是+1）我通常使用
hidden
来避免意外的滚动条。Peter Paul Koch（又名PPK）有一篇关于带溢出的清除浮动的文章：我建议使用
overflow:auto
而不是
hidden
。这是给父元素指定其子元素占用空间大小的常用方法。（我仍然是+1）。我通常使用
隐藏
来避免意外的滚动条。
.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;}