|
理解了第3章介绍的独立的盒子模型，以及在标准流情况下的盒子的相互关系之后，读者也会发现一个重要的问题，如果仅仅按照标准流的方式进行排版．就只能按熙仅有的几种可能性进行排版，限制太大了。 在第2章“禅意花园”中的丰富效果是如何实现的呢? css的制定者也想到了排版限制的问题，因此又给出了若干不同的手段，实现各种排版需要。 要涉及的最重要的就是CSS中的float和position两个属性。下面就详细介绍它们的应用。 在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后。块级元素的表现就会有所不同。 CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right．元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不再伸展。而是根据盒子里面的内容的宽度来确定。 一、准备代码 浮动的性质比较复杂，这里先制作一个基础的页面，代码如下，文件位于网页学习网CSS教程资源中“第4章\01.htm”。后面一系列的实验将基于这个文件进行。lodidance.com
上面的代码定义了4个<div>块，其中一个父块，另外3个是它的子块。为了便于观察，将各个块都加上了边框以及背景颜色，并且让<body>标记以及各个div有一定的margin值。 如果3个子div都没有设置任何浮动属性，就为标准流中的盒子状态。在父盒子中，4个盒子各自向右伸展，竖直方向依次排列，效果如图1所示。  图1 没有设置浮动时的效果
下面开始在这个基础上做实验，通过一系列的实验，就可以充分体会到浮动盒子具有哪些性质了。 二、实验1——设置第1个浮动的div 在上面的代码中找到：
将.son1盒子设置为向左浮动，代码为：
这时效果如图2所示，相应的文件位于网页学习网CSS教程资源中“第4章\02.htm”。可以看到，标准流中的Box-2的文字在围绕着Box-1排列，而此时Box-1的宽度不再伸展，而是能容纳下内容的最小宽度。  图2 设置第一个div浮动时效果
请读者思考，此时Box-2这个盒子的范围是如何确定的，也就是它的左边框在哪里。答案是与Box-1的左边框重合，因为此时Box-1已经脱离标准流，标准流中的Box-2会顶到原来Box-1的位置，而文字会围绕着Box-1排列。 三、实验2——设置第2个浮动的div 将Box-2的float属性设置为left．此时效果如图3所示。可以看到Box-2也变为根据内容确定宽度，并使Box-3的文字围绕Box-2排列。 相应的文件位于网页学习网CSS教程资源中“第4章\03.htm”。  图3 设置前两个div浮动时效果
从图中可以更清晰地看出，Box-3的左边框仍在Box-1的左边框下面。否则Box-1和Box-2之间的空白不会是深色，这个深色实际上是Box-3的背景色，Box-1和Box-2之间的空白是由二者的margin构成的。 四、实验3——设置第3个浮动的div 接下来，把Box-3也设置为向左浮动。这时效果如图4所示，相应的文件位于网页学习网CSS教程资源中“第4章\04.htm”。可以清楚地看到，文字所在的盒子的范围。以及文字会围绕浮动的盒子排列。  图4 设置三个div浮动时效果
五、实验4——改变浮动的方向 将Box-3改为向右浮动，即float:right。这时效果如图5所示，相应的文件位于网页学习网CSS教程资源中“第4章\05.htm”。可以看到Box-3移动到了最右端，文字段落盒子的范围没有改变，但文字变成了夹在Box-2和Box-3之间。  图5 改变浮动方向后的效果
这时，如果把浏览器窗口慢慢调整变窄，Box-2和Box-3之间的距离就会越来越小，直到二者相接触。如果继续把浏览器窗口调整变窄，浏览器窗口就无法在一行中容纳Box-1到Box-3，Box-3会被挤到下一行中，但仍保持向右浮动，这时文字会自动布满空间，如图6所示。lodidance.com  图6 div被挤到下—行时的效果
|
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/674.html |
