浮动float和清除clear

一、浮动（float）

float简介

• 取值：left,right,none,inherit,默认none（不浮动）
• 可应用与所有元素
• 没有继承性
• 不在正常流中，但会影响布局。因为一个元素浮动时，其他内容会“环绕”该元素
• 与之前提到的合并垂直外边距不同，浮动元素周围的外边距不会合并
• 浮动非替换元素，必须为其声明width

两个概念

• 包含块：浮动元素的包含块是其最近的块级祖先元素
• 块级框：浮动元素会生成一个块级框，而不论其本身是什么。它会像块级元素一样摆放和表现（就如同div一样）

9条浮动规则

1. 浮动元素的左（右）外边界不能超过其包含块的左（右）内边界。
2. 浮动元素不会彼此覆盖。（定位则很容易导致元素相互覆盖）
   
   例：一个元素向左浮动，而另一个浮动元素已经在那个位置，后放置的元素将挨着前一个浮动元素的右外边界放置。
   
   例：如果上例中的浮动元素的顶端在所有之前浮动元素的底端下面，它可以一直浮动到父元素的左内边界
3. 浮动元素不会相互重叠。
   
   例：一个body，宽500px，它只有两个300px宽的图像。第一个图像浮动到左边，第二个图像浮动到右边。这是，第二个图像向下浮动，直到其顶端在第一个图像的底端之下。这样就避免了两个图像有100px重叠。
4. 一个浮动元素的顶端不能比其父元素的内顶端更高（这可以防止浮动元素一直浮动到文档的顶端）；如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。
   
   例：有三个段落，中间的段落浮动。则浮动段落就会像有一个块级父元素一样（如div）浮动。这能防止浮动段落一直向上移动到三个段落共同的父级元素的顶端。
5. 浮动元素的顶端不能比之前任何浮动元素或块级元素的顶端更高。
6. 如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。这进一步限制元素向上浮动，不允许元素浮动到包含该浮动元素之前内容的行的顶端之上，使浮动元素在其上下文内。
   
   例：一个段落的正中间有一个浮动图像，这个图像顶端最高只能放在该图像所在的行框的顶端。
7. 浮动元素不能超出其包含元素的边界（除非它太宽，本身都无法放下），如果没有足够空间，浮动元素会被挤到新的一行。
   
   例：多个浮动元素出现在一个水平行上，远远超出其包含块的边界。实际上，如果浮动元素出现在另一个浮动元素的旁边，因此导致超出包含块，这时这个浮动元素会向下浮动到之前浮动元素下面的某一点，从下一行开始。
8. 满足前7条的前提下，浮动元素尽可能高的放置。
9. 满足前8条的前提下，左（右）浮动元素尽可能左（右）。

补充

前面介绍的规则有一些有意思的后果，这些结果源于两方面：一方面是规则中指出了一些要求，另一方面是规则中有些方面没有谈到。

1. 浮动元素比其父元素高时的结果（常见）
   
   例：一个小文档，只包含几个段落和h3元素，其中第一个段落包含一个浮动图像（有5px外边距）。这时图像如果偏大，会超出其父元素底端。这是因为浮动规则只规定了浮动元素和其父元素的左、右和上边界，而没有涉及下边界的规定。
   
   例：CSS2.1规定“浮动元素会延伸，从而包含其所有后代浮动元素”。所以，上例中可以将父元素置为浮动元素，就可以把浮动图像包含在父元素内。
   
   例：还是这个例子，考虑背景及其文档中之前出现的浮动元素的关系。由于浮动元素同时处于流内和流外，元素背景会滑到浮动图像的下面，但具体内容并不从其内容区左边界开始，避免被覆盖。
2. 负外边距可能导致浮动元素移到其父元素的外面。
   
   这看上去与前面的9条规则矛盾，但其实并不矛盾。通过设置负外边距，元素可能看上去比其父元素更宽，同样的道理，浮动元素也可能超出其父元素。
   
   例：假设div没有内边距、边框和外边距，其上内边界在100px处，div内部浮动图片的左外边距和上外边距都是-15px。为了得出浮动元素的上内边界位置，浏览器计算如下：100px+外边距(-15px)+内边距0=85px。因此，浮动图像的上内边界在85px处，比其父元素的上内边界高。但数学计算并没有违反规范。
   
   问题：是用负外边距时，如果浮动元素超出其父元素，文档如何显示？答案是不确定的，所以尽量避免使用。
3. 浮动元素比其父元素更宽时，浮动元素也会超出其父元素的左右内边界。
4. 浮动元素与正常流中的内容发生重叠会怎样？
   
   例：如果一个浮动元素在内容流过的边上有负外边距，就会发生重叠。
   
   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属性的元素）的顶端与浮动元素的底端之间有一定空间，可以为浮动元素本身设置一个下外边距。