浮动的一点研究

根据《css权威指南》所属，浮动”自成一派”，它不在正常流中，但是又可以影响正常流，这里只对浮动几个有意思的点做一个说明。

几个特性说明

1. 浮动可以隔绝外边距合并。
   这个不难理解，外边距的合并只会发生在两个正常流的元素中，如果两个正常流的元素中插入一个浮动元素，那么就隔绝了它们两个互相影响的可能
2. 浮动元素会生成一个块级框，而不论这个元素本身是什么,但是宽度会坍塌到恰好能容纳内容，也就是说，如果内部没有正常流元素，或者是别的能撑起宽度的元素，浮动元素的宽度就是0。
3. css2.1澄清了一个行为：浮动元素会延伸，从而包含其所有后代浮动元素
4.

简单研究

浮动和正常流的大致可以分为这么几种方式
1. 浮动＋正常流
2. 正常流＋浮动
3. 浮动＋正常流＋浮动
4. 正常流＋浮动＋正常流
5. 浮动＋浮动
demo中的基础代码如下：

  p {        background-color: grey;        margin:0;    }

    <div class="body2">        <p class="p1">第一段路</p>        <p class="p2">第二段落</p>        <p class="p3">第三段落</p>    </div>

基础图形如下：

浮动＋正常流

先看图：

代码：

p1{float:leftwidth:100px}p2 {background:red}

解释：这里先把p3隐藏了，减少干扰，可以看到浮动的元素是浮动在正常流元素之上的，内部的文字受到了浮动元素的影响，位置虽然是移动了，但是没有被覆盖

正常流＋浮动

1. 如果正常流是块级元素
   
   解释：这里没什么可解释的，不过看到css权威指南上有一句精准的描述：如果源文档中一个浮动元素之前出现另一个元素；浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高
2. 如果正常流是行内元素,且浮动元素的宽度在行内元素的同一行能塞得下
   
3. 如果正常流是行内元素,且浮动元素的宽度在行内元素的同一行不能塞得下：
   解释：不能塞下的情况就和第一种情况一致，会直接浮动到下测

正常流＋浮动＋正常流

解释：几乎是和浮动＋正常流是一样的情况，这里为了说明，特意是把p2浮动到了右侧,并且把p3的字数增加了许多
p3作为一个块元素，被浮动的p2覆盖，但是文字仍然没有被覆盖
我也做了p3设置为display:inline的实践，当然就不会被覆盖了，因为行内元素的宽度是由文字的空间决定的

浮动＋正常流＋浮动

这里的正常流的字数和是否是块元素仍然是有影响的
1. 这里只给出p2是块元素的情况

2. 如果p2是行内元素且字数比较少

3 如果p2行内元素且字数较多

没啥可解释的，和正常流+浮动的情况一致

浮动＋浮动＋浮动

基础的情况是这样的：

会出现在同一行，所以个人觉得float会形成的，更像是一个inline-block的区域，浮动之前的情况下面会有更详细的讨论

浮动之间的影响

更常见的，是我们在一个p元素之内插入多个浮动元素，这几个浮动元素会互相影响。
实践过程就不具体描述了，这里给出几个总结性的结论：
- 浮动元素在文档中的顺序中，在前面的元素必须在位置上高于等于后面的元素（这个一般考虑的情况是前面的左浮动，后面的右浮动，右侧浮动的不可能浮动到左侧的上面去，即使上面还有空间，最多也就是和左浮动元素高度持平）

特殊说明

在上文的特性中提到过，如果使用负的margin，或者是太宽的宽度，都会使得浮动的元素有可能会和正常流的元素发生覆盖，具体是谁覆盖谁，

css2.1提出了明确的规则:

• 行内框与一个浮动元素发生重叠时，其边框，背景和内容都在该浮动元素“之上“显示。
  
• 块框与一个浮动元素重叠时，其边框和背景在该浮动元素“之下“显示，而内容在浮动元素“之上“显示。
  
  这里所说的重叠行文与源文档中的顺序无关。元素在浮动元素之前还是之后出现并不重要；不论有怎样的顺序，都会有同样的行为。

清除浮动

ok～最后总是要说到这个话题，清除浮动的讨论方案网上提到的基本有3种吧，这里只介绍css提供的clear属性
clear属性只能用于块级元素
怎么理解？比如我们有以下的css语句

h3{clear:left}

意思就是语义化：h3的左侧不允许出现浮动元素
于是按照css的标准，h3左侧如果出现浮动元素的话，h3就会向下移动，使得自己的左边避开浮动

clear的工作原理：

• 在css1和css2中，clear的工作是增加元素的上外边距，使之最后落在浮动元素的下面
• 在css2.1中，是另一种解析方式：引入了一个清除区域（clearance），清除区域在元素外边距上增加了一个额外的间隔，不允许任何浮动元素进入

由于这个清除区域的存在，我们总是会在清除元素的margin-top小于浮动元素的高度的时候，清除元素的上边框会抵到浮动元素的浮动框的边界，也就是
（margin-top）+清除区域 ＝ 浮动元素高度
为了解决这个问题，我们只能在想给这两者之间留点空隙的时候增加浮动元素的下外边距，因为：浮动元素的下外边距会增加浮动框的大小

over