是你给元素设置浮动之后，没有给该元素的父元素清除浮动带来的影响所导致的。只要你给其父元素清除浮动带来的影响即可解决问题。
<div class="top clearfix"><div class="logo">
我爱css:)
</div>
<div class="so">
<input type="text"></input>
<button type="button" name="button">搜索</button>
</div>
</div> .top {
background: red
}
.top .logo {
display: block
float: left
font-size: 30px
width: 30%
}
.top .so {
display: block
float: right
}
.clearfix:after,
.clearfix:before{
content: ""
height: 0
line-height: 0
display: block
clear: both
visibility: hidden
}
.clearfix{
zoom:1
}
给元素设置浮动后，该元素会脱离标准流（不在占据原来的位置），导致其父元素没有被撑开，没有高度的div你设置背景颜色是不会起作用的。
我理解的并不是很深刻但是希望能对你 有所启发以下是原创正文：
css到底是什么？css据我理解也算是一种语言，专业术语叫超文本层叠样式表，
css的功能非常的强大，好像是温谦老师说的爱上CSS，
css：像艺术家一样浪漫，像工程师一样严禁。说实话讲css真的太好了。
css能让你做网站的时候摆脱表格布局，它是一种比较旧的新式语言。
说它旧因为很早就存在了，只是很少有人去用，直到最近几年才被广泛应用。
css的灵活性是HTML语言无法实现的。举个简单的例子，<b>互联网，我来了！</b>这个我想你应该了解，这是加粗字体，HTML就这么简单了无法再添加功能了，但是css却可以这样做<b style="font-color:red">互联网，我来了！</b>字体不但加粗而且是红色显示。这就是css的其中一个很微小的功能，时间有限不再写了，希望多少能对你有所帮助，另外欢迎到我的论坛来共同探讨提高bbs.xtzonghe.cn
