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更改.