多个div在一个div中一行水平显示(float)

div本身是block元素，块状元素默认占据一行，所以直接显示的话是不能在一行显示的

以下图为例

left，right在一行，bottom在底下

html代码如下：

<div class="div"><div class="div1">    left    </div>    <div class="div2">    right    </div>    <div class="div3">bottom</div></div>

一个大div包含3个小div并且前2个一行显示第三个占据下面的一行。

经典做法是用float方法，div1,div2浮动div3 清除浮动即可实现，代码：

<style>html,body{margin:0;padding:0;}div{text-align:center;}.div{background-color:#F00;overflow:auto;}.div>.div1{float:left;width:50%;height:100px;line-height:100px;background-color:#0C0;}.div>.div2{float:left;width:50%;height:100px;line-height:100px;background-color:#aaa;}.div3{height:200px;line-height:200px;background-color:#FCF;clear:both;}</style>