解决浮动效果消失的问题

首先有一个父盒子，里面放两个子盒子，全部左浮代码如下：

 <div class="w search clearfix">
            <div class="logo fl" style="margin-left:0px;">
                <img src="../imgs/logo.gif" alt="">
            </div>
            <div class="search-box fl"></div>
        </div>

样式代码如下：

 .search{
        border: 1px solid #000;
    }
    .search .logo{
        width:290px;
        height:135px;
        padding:20px 7px 18px;
        border: 1px solid #000;
    }
    .search .search-box{
        width: 625px;
        height:130px;
        border: 1px solid #000;
    }

期待的样式如下：

但是实际效果如下：

解决办法：父盒子加overflow:hidden属性即可解决问题。

也不知道是什么原因，后来想到了盒子塌陷用的overflow:hidden解决的问题，然后给父盒子加上这个属性后解决问题，但是没想明白是什么原因，后来在网上搜了下，再想有没有可能是BFC的原因，但是我还是没想明白具体出错的原因是啥。这篇先记录下错误，如果有人看到，也遇到同样的问题，明白原理的话可以和我一起交流下 。