让人又爱又恨的float

页面布局时，出现一行两个不同宽度的div在一行上。如下图：

通俗的做法的是什么呢？

方法千千万，我独爱float。

好吧，又爱又恨的float我用了。横向的效果出来了，完美吗？

     html:                       <div id="videoMsg">
    <div id="videoTitle">战神</div>
    <div id="minicontent">简介<img src="./images/detail/news_arrows.png" alt=""></div>
    <div id="msg">简介简介。。。简介简介</div>    

    </div>

 css:

#videoMsg{
    margin-top: 0.556rem;
    width: 100%;
    line-height: 0.389rem;
}
#videoTitle{
display: inline-block;
    font-size: 0.389rem;
    font-family: bold;
    color: #333333;
    float: left;
    margin-left: 0.417rem;
    height: 0.389rem;

}
#minicontent{
display: inline-block;
font-size: 0.361rem;
height: 0.361rem;
color:#999999;
float:right;
margin-right: 0.417rem;
line-height: 0.389rem;
}
#minicontent>img{
display: inline-block;
    font-size: 0;
    width: 0.333rem;
    height: 0.333rem;
    vertical-align: middle;
}

#msg{
    width: calc(100% - 0.834rem);
    margin-left: 0.417rem;
    font-size: 0.361rem;
    margin-top: 0.167rem;
    height: 0.389rem;
    color: #666666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}

不知各位发现问题没？

对，#msg中的margin-top 不起效。

深入分析：float的使用使得标签已经脱离文档流。所以会影响到隶属于使用float的标签的后面的布局。

最常用的有效方法当然是clear 了，对吧？

经过改造，完美实现：

原html修改为：

                    <div id="videoMsg">
    <div id="videoTitle">战神</div>
    <div id="minicontent">简介<img src="./images/detail/news_arrows.png" alt=""></div>
    <div class = "mclear"></div>
    <div id="msg">简介简介。。。简介简介</div>
   
    </div>

原CSS添加：

.mclear{
clear:both;
}