1.浮动
浮动模型是在布局中用到的最重要的概念之一，以前介绍的把Blogger变成三栏的布局中就用到了浮动。我们通过定义float属性来让元素浮动，浮动的元素脱离了文档流，就像上一节讲的绝对定位的元素一样，普通流中的框表现的就像浮动框不存在一样，我们可以形象的把它想像作它在空间中“飘浮”，周围环绕着一些内容。因此，一个向左浮动的元素有文本在它的右侧运动，并环绕着它的底边；一个向右浮动的元素将有内容在它的左侧移动。
浮动的框可以左右移动，直到它的外边缘碰到包含它的框的内边缘或另一个浮动框的边缘;CSS允许任何元素浮动。
对一个元素应用float属性会自动将它转变成一个块级元素，其它元素的内容在其周围流动。利用这个特性我们可以让文字环绕在图片周围，形成Word中文字环绕的效果。例如在Blogger中我们添加图片的时候可以选择向左，向右或者居中，这就是用了Float属性，添加完图片后，你可以查看源代码，其中必有一条float属性。
float属性可以取三个可能的值：left，使元素向左浮动；right，使元素向右浮动；none，消除浮动。
2.浮动的一些规则
- 多个浮动元素不会相互覆盖，一个浮动元素的框碰到另一个浮动元素的框后便停止运动。
- 浮动元素的顶端不能高于父元素的内顶端，也不能高于先于它出现的浮动元素或段落的顶端。另外，浮动元素的顶端不能高于行框的顶端，如果行框中有先于浮动元素的内容。这些规则限制了元素向上浮动，使浮动低于其父元素。
- 一个浮动元素不能伸出其容纳元素的边线，除非它的宽度太大而不能被容纳。如果多个浮动元素，当一行不能全部容纳它们的时候，则另起一行，剩余的被“挤”到下一行。
- 在遵从其它限制下，浮动元素尽可能高。向左浮动的元素尽可能向左，向右浮动的元素尽可能向右，较高的位置优先给更偏左或偏右的元素。
3.清理
清理(clear)属性是浮动(float)属性的一个同伴。它控制跟随一个浮动元素的元素的位置。这个属性中用来防止内容跟随一个浮动的元素，迫使它移动到浮动的下一行。
clear属性可以取四个值：left，它把元素推到前面生成的向左浮动的元素下面；right，它把元素推到前面生成的向右浮动的元素下面；both，它把元素推到前面生成的所有元素下面；和none，它取消前面的定位。clear属性不仅限于非浮动元素；相反，它还可以用来控制浮动元素的行为，把一个浮动元素推到其它浮动元素下面。
我们可以通过两张图片来明白清理的作用：
第一张图片没有对行框进行清理，它环绕在浮动的图片的周围，第二张图片对段落进行了清理，它便不再环绕图片，到了浮动框的下面，相当于增加了这个段落的顶空白边，为浮动框留出了空间。
对元素进行清理实际上就是为前面的浮动元素留出了垂直空间。
没有评论:
发表评论