分兩種情況：
.content{
width:350px;
height:150px;
color:#fff;
}
.content1,.content2{
background-color: #00f;
}
.content2{
margin-top:10px;
}
.one{
background-color:#f00;
float: left;
}
.two{
background-color: #3dfeca;
}
.content1 .one,
.content2 .one{
height:50px;
}
一，后面的元素是塊級元素---block
<div class='content content1'>
<div class='one'>
the folowing element is block;
</div>
<div class='two'>
second div idv idv div div div div div div div div
</div>
</div>
如果給第一個class為one的設置了float，.two的div會占據.one div的位置，但是字不會重疊。.two中的字會跟在.one中字的后面排列出來如圖1所示，（注意：如果.two的寬度不夠大的話，字會被擠到下一行，如圖2所示，）
圖1 圖2
二，后面的元素是行內元素--inline
如果后面的元素是行級元素的話，在給第一個元素設置float后，后一個元素不會占據前一個元素的位置。而是乖乖的跟在后面。例如：
1 <div class='content content2'> 2 <div class='one'> 3 the folowing element is inline; 4 </div> 5 <span class='two'> 6 inline element is span;there is other inline element such as a,i,b,em 7 </span> 8 </div>
