float 多个div在同一行

float：

在前面元素显示后的情况下（向前面找border margin  pading），向某个方向浮动，它并不占位置，但是在同一容器下，文字会围绕float元素

 

多个div在同一行

方案1绝对定位

现在写成这样：
<div style="position:relative;height:100px">
  <div  style="position:absolute;top:0;left:0;width:50%;height:100px"/>
  <div  style="position:absolute;top:0;left:50%;width:50%;height:100px"/>
</div>
外层div加个高度，因为绝对定位的内容不会占空间，不加高度会和下面的内容重叠。

 

float 解决方案

<div style="height:100px">
  <div  style="width:50px;height:100px;float:left"/>
  <div  style="width:50%;height:100px;float:left"/>
</div>

外层div加个高度，float和正常情况的显示是不占位置的。