CSS - Float

.box1{  
    width:200px;  
    padding:20px;  
    border:1px solid red;  
    margin:10px;     
} 
.float{ float:left; }
.clear{ clear:both; }

<div> <!-- 效果1 -->
	<div class="box1 float">文本内容1</div>
	<div class="box1 float">文本内容2</div>
</div>
<div class="box1">文本内容4</div>

<div> <!-- 效果2 -->
	<div class="box1 float">文本内容1</div>
	<div class="box1 float">文本内容2</div>
	<div class="box1">文本内容3</div>
</div>

<div> <!-- 效果3 -->
	<div class="box1 float">文本内容1</div>
	<div class="box1 float">文本内容2</div>
	<div class="clear"></div>
	<div class="box1">文本内容3</div>
</div>

<div> <!-- 效果4 -->
	<div class="box1 float">文本内容1</div>
	<div class="box1 float">文本内容2</div>
	<div class="clear"></div>
</div>
<div class="box1">文本内容3</div>

<div> <!-- 效果5 -->
	<div class="box1 float">文本内容1</div>
	<div class="box1 float">文本内容2</div>
</div>
<div class="clear"></div>
<div class="box1">文本内容3</div>