登录 | 注册 | FAQ
Anonymous

第13课:浮动元素(float)

我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理:

一个向左浮动的盒子

举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示:

一个包含被文字环绕的图片的向左浮动的盒子

如何实现这个效果?

上例的HTML代码如下所示:

	
	<div id="picture">
		<img src="bill.jpg" alt="Bill Gates">
	</div>

	<p>causas naturales et antecedentes, 
	idciro etiam nostrarum voluntatum...</p>
	
	

要实现图片向左浮动、而且被文字环绕的效果,你只需先设定图片所在盒子的宽度,然后再把CSS属性float设为left即可:

	
	#picture {
		float:left;
		width: 100px;
	}
	
	

另一个例子:列

浮动也可以用于实现在文档中分列。要创建多个列,你需要在HTML代码里用div来结构化想要的各个列:

	
	<div id="column1">
		<p>Haec disserens qua de re agatur
		et in quo causa consistat non videt...</p>
	</div>

	<div id="column2">
		<p>causas naturales et antecedentes, 
		idciro etiam nostrarum voluntatum...</p>
	</div>

	<div id="column3">
		<p>nam nihil esset in nostra 
		potestate si res ita se haberet...</p>
	</div>
	
	

下面,我们把各列的宽度设定为“33%”,并通过定义float属性令各列向左浮动:

	
	#column1 {
		float:left;
		width: 33%;
	}

	#column2 {
		float:left;
		width: 33%;
	}

	#column3 {
		float:left;
		width: 33%;
	}
	
	

float属性的值可以是leftright或者none

clear属性

CSS属性clear用于控制浮动元素的后继元素的行为。

缺省地,后继元素将向上移动,以填补由于前面元素的浮动而空出的可用空间。在前面的例子中,文本自动上移到了比尔盖茨的图片旁。

clear属性的值可以是leftrightbothnone。原则是这样的:如果一个盒子的clear属性被设为“both”,那么该盒子的上边距将始终处于前面的浮动盒子(如果存在的话)的下边距之下。

	
	<div id="picture">
		<img src="bill.jpg" alt="Bill Gates">
	</div>

	<h1>Bill Gates</h1>

	<p class="floatstop">causas naturales et antecedentes, 
	idciro etiam nostrarum voluntatum...</p>
	
	

要避免文本上移到图片旁,我们可以在CSS中添加以下代码:

	
	#picture {
		float:left;
		width: 160px;
	}

	.floatstop {
		clear:both;
	}
	
	

小结

浮动在很多情况下都很有用,它经常与定位联合使用。在下一课,我们将深入了解如何进行盒子的绝对或相对定位。



<< 第12课:盒状模型——高度和宽度

第14课:元素的定位 >>