分两种情况:
.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>