一、浮动(float)
float简介
- 取值:left,right,none,inherit,默认none(不浮动)
- 可应用与所有元素
- 没有继承性
- 不在正常流中,但会影响布局。因为一个元素浮动时,其他内容会“环绕”该元素
- 与之前提到的合并垂直外边距不同,浮动元素周围的外边距不会合并
- 浮动非替换元素,必须为其声明width
两个概念
- 包含块:浮动元素的包含块是其最近的块级祖先元素
- 块级框:浮动元素会生成一个块级框,而不论其本身是什么。它会像块级元素一样摆放和表现(就如同div一样)
9条浮动规则
- 浮动元素的左(右)外边界不能超过其包含块的左(右)内边界。
- 浮动元素不会彼此覆盖。(定位则很容易导致元素相互覆盖)
例:一个元素向左浮动,而另一个浮动元素已经在那个位置,后放置的元素将挨着前一个浮动元素的右外边界放置。
例:如果上例中的浮动元素的顶端在所有之前浮动元素的底端下面,它可以一直浮动到父元素的左内边界 - 浮动元素不会相互重叠。
例:一个body,宽500px,它只有两个300px宽的图像。第一个图像浮动到左边,第二个图像浮动到右边。这是,第二个图像向下浮动,直到其顶端在第一个图像的底端之下。这样就避免了两个图像有100px重叠。 - 一个浮动元素的顶端不能比其父元素的内顶端更高(这可以防止浮动元素一直浮动到文档的顶端);如果一个浮动元素在两个合并外边距之间,放置这个浮动元素时就好像在两个元素之间有一个块级父元素。
例:有三个段落,中间的段落浮动。则浮动段落就会像有一个块级父元素一样(如div)浮动。这能防止浮动段落一直向上移动到三个段落共同的父级元素的顶端。 - 浮动元素的顶端不能比之前任何浮动元素或块级元素的顶端更高。
- 如果源文档中一个浮动元素之前出现另一个元素,浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。这进一步限制元素向上浮动,不允许元素浮动到包含该浮动元素之前内容的行的顶端之上,使浮动元素在其上下文内。
例:一个段落的正中间有一个浮动图像,这个图像顶端最高只能放在该图像所在的行框的顶端。 - 浮动元素不能超出其包含元素的边界(除非它太宽,本身都无法放下),如果没有足够空间,浮动元素会被挤到新的一行。
例:多个浮动元素出现在一个水平行上,远远超出其包含块的边界。实际上,如果浮动元素出现在另一个浮动元素的旁边,因此导致超出包含块,这时这个浮动元素会向下浮动到之前浮动元素下面的某一点,从下一行开始。 - 满足前7条的前提下,浮动元素尽可能高的放置。
- 满足前8条的前提下,左(右)浮动元素尽可能左(右)。
补充
前面介绍的规则有一些有意思的后果,这些结果源于两方面:一方面是规则中指出了一些要求,另一方面是规则中有些方面没有谈到。
- 浮动元素比其父元素高时的结果(常见)
例:一个小文档,只包含几个段落和h3元素,其中第一个段落包含一个浮动图像(有5px外边距)。这时图像如果偏大,会超出其父元素底端。这是因为浮动规则只规定了浮动元素和其父元素的左、右和上边界,而没有涉及下边界的规定。
例:CSS2.1规定“浮动元素会延伸,从而包含其所有后代浮动元素”。所以,上例中可以将父元素置为浮动元素,就可以把浮动图像包含在父元素内。
例:还是这个例子,考虑背景及其文档中之前出现的浮动元素的关系。由于浮动元素同时处于流内和流外,元素背景会滑到浮动图像的下面,但具体内容并不从其内容区左边界开始,避免被覆盖。 - 负外边距可能导致浮动元素移到其父元素的外面。
这看上去与前面的9条规则矛盾,但其实并不矛盾。通过设置负外边距,元素可能看上去比其父元素更宽,同样的道理,浮动元素也可能超出其父元素。
例:假设div没有内边距、边框和外边距,其上内边界在100px处,div内部浮动图片的左外边距和上外边距都是-15px。为了得出浮动元素的上内边界位置,浏览器计算如下:100px+外边距(-15px)+内边距0=85px。因此,浮动图像的上内边界在85px处,比其父元素的上内边界高。但数学计算并没有违反规范。
问题:是用负外边距时,如果浮动元素超出其父元素,文档如何显示?答案是不确定的,所以尽量避免使用。 - 浮动元素比其父元素更宽时,浮动元素也会超出其父元素的左右内边界。
- 浮动元素与正常流中的内容发生重叠会怎样?
例:如果一个浮动元素在内容流过的边上有负外边距,就会发生重叠。
CSS2.1中有规定:
(1)行内框与一个浮动元素重叠时,其边框、背景和内容都在该浮动元素“之上”显示;
(2)块级框与一个浮动元素重叠时,其边框和背景在该浮动元素“之下”显示,而内容在浮动元素“之上”显示。
注意:这里的“重叠”与源文档中的顺序无关。元素在浮动元素之前还是之后出现并不重要。不论怎么的顺序,都会有同样的行为。
二、清除clear
clear简介
- 取值:left,right,both,none,inherit,默认none
- 只应用于块级元素
- 无继承性
例:h1{clear:none;)h3两边可以出现浮动元素
例:h1{clear:both;)h3两边不出现浮动元素
例:h1{clear:left;)h3左边不出现浮动元素
清除区域
CSS2.1引入清除区域,它是在元素上外边距之上增加的额为间隔,不允许任何浮动元素进入这个范围内。所以元素设置clear时,它的外边距不会改变,之所以会向下移动是这个清除区域造成的。
例:如果我把一个40px浮动图像的下一个元素h3(上外边距15px)设置了clear为both的属性,那么清除区就有25px,结果是h3的上边框边界推到刚好越过浮动元素的下边界。如果h3上外边距为40px,则clear的值就不重要了。
注意:一般,无法知道一个元素周围多大范围内不允许有浮动元素。要确保清除元素(设置clear属性的元素)的顶端与浮动元素的底端之间有一定空间,可以为浮动元素本身设置一个下外边距。