就像使用float：left设置列表项的横向排列一样，也可以对div设置同样的属性。只需要在样式中加上，其基本语法格式如下：
<style>
div{
width: 500px; height: 200px;margin: 10px; padding: 30px;
border: solid 2px red; color: blue;
font-size: 25px; text-align: center; /*内容水平居中*/
line-height: 200px; /*设置行高与高度相同，模拟垂直居中*/
float:left; /*设置左浮动*/
}
</style>
可以看到，浏览器中两个div并排到了同一行，由于设置了div为可浮动，也就意味着div是不固定的，如果浏览器宽度够容纳两个div，则会并排显示，甚至3个或4个都不是问题。但如果将浏览器宽度调窄，窄到其宽度小于两个div的总宽度，div也会变成在两行上显示，这就是所谓浮动的效果。