首先有一个父盒子,里面放两个子盒子,全部左浮代码如下:
<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的原因,但是我还是没想明白具体出错的原因是啥。这篇先记录下错误,如果有人看到,也遇到同样的问题,明白原理的话可以和我一起交流下 。