CSS教程系列十——浮动和清理

这是基本概念的最后一篇,终于写完了。:) 没办法,我这人急性子。
1.浮动
浮动模型是在布局中用到的最重要的概念之一,以前介绍的把Blogger变成三栏的布局中就用到了浮动。我们通过定义float属性来让元素浮动,浮动的元素脱离了文档流,就像上一节讲的绝对定位的元素一样,普通流中的框表现的就像浮动框不存在一样,我们可以形象的把它想像作它在空间中“飘浮”,周围环绕着一些内容。因此,一个向左浮动的元素有文本在它的右侧运动,并环绕着它的底边;一个向右浮动的元素将有内容在它的左侧移动。

浮动的框可以左右移动,直到它的外边缘碰到包含它的框的内边缘或另一个浮动框的边缘;CSS允许任何元素浮动。

对一个元素应用float属性会自动将它转变成一个块级元素,其它元素的内容在其周围流动。利用这个特性我们可以让文字环绕在图片周围,形成Word中文字环绕的效果。例如在Blogger中我们添加图片的时候可以选择向左,向右或者居中,这就是用了Float属性,添加完图片后,你可以查看源代码,其中必有一条float属性。

float属性可以取三个可能的值:left,使元素向左浮动;right,使元素向右浮动;none,消除浮动。

2.浮动的一些规则

  • 多个浮动元素不会相互覆盖,一个浮动元素的框碰到另一个浮动元素的框后便停止运动。
  • 浮动元素的顶端不能高于父元素的内顶端,也不能高于先于它出现的浮动元素或段落的顶端。另外,浮动元素的顶端不能高于行框的顶端,如果行框中有先于浮动元素的内容。这些规则限制了元素向上浮动,使浮动低于其父元素。
  • 一个浮动元素不能伸出其容纳元素的边线,除非它的宽度太大而不能被容纳。如果多个浮动元素,当一行不能全部容纳它们的时候,则另起一行,剩余的被“挤”到下一行。
  • 在遵从其它限制下,浮动元素尽可能高。向左浮动的元素尽可能向左,向右浮动的元素尽可能向右,较高的位置优先给更偏左或偏右的元素。

3.清理

清理(clear)属性是浮动(float)属性的一个同伴。它控制跟随一个浮动元素的元素的位置。这个属性中用来防止内容跟随一个浮动的元素,迫使它移动到浮动的下一行。

clear属性可以取四个值:left,它把元素推到前面生成的向左浮动的元素下面;right,它把元素推到前面生成的向右浮动的元素下面;both,它把元素推到前面生成的所有元素下面;和none,它取消前面的定位。clear属性不仅限于非浮动元素;相反,它还可以用来控制浮动元素的行为,把一个浮动元素推到其它浮动元素下面。

我们可以通过两张图片来明白清理的作用:

第一张图片没有对行框进行清理,它环绕在浮动的图片的周围,第二张图片对段落进行了清理,它便不再环绕图片,到了浮动框的下面,相当于增加了这个段落的顶空白边,为浮动框留出了空间。
对元素进行清理实际上就是为前面的浮动元素留出了垂直空间。

没有评论: