float left clear both

要想解决这个问题,很简单,设3个DIV即可解决问题:

 

<body>
	<div style="height: 200px; width: 200px; background-color: red;float: right;">
		我是红色
	</div>
	
	
	<div style="height: 200px; width: 200px;background-color: gray; clear: left; ">
		我是灰色
	</div>
	
	
	<div style="height: 200px; width: 200px;background-color: green;float: right;">
		我是绿色
	</div>


</body>

 1、当某个元素变成float:left时,有2个作用:一是这个元素会浮动在前一个元素的左侧(前提是前一个元素是行内元素);二是此元素变成块内元素,其它元素可以与之在同一行。

 

2、如果前面一个元素是float:left的,那么后面一个元素将强行被拉到上一行,此时如果不想上去,用clear:left即可,这句话的意思是如果左边有浮动元素,将认为左侧是块状元素,即自己换行。 

 

 

 

 

 

 

 

 

 

 

 

讲解css非常专业的一个网站:

refurl:http://zh.html.net/tutorials/css/lesson13.php

 

 http://www.w3school.com.cn/cssref/pr_class_float.asp

 

 

 

你可能感兴趣的:(float)