分两种情况：
.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>
二，后面的元素是行内元素--inline
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>
原文：http://www.cnblogs.com/xuepei/p/7403747.html