浮动 规则
CSS允许浮动任何元素，使用float属性来实现。浮动元素会从正常流中删除，不过他仍然会影响到布局。
首先要明确任何浮动元素都会生成一个块级框，不论这个元素本身是什么。浮动元素会从正常流中删除，对于一个非替换元素，若想使用浮动，需指定宽度width。
CSS2.1关于浮动的规则如下：
1.浮动元素的左（或右）外边界不能超出其包含块的左（或右）外边界。
2.为了防止浮动元素重叠，一个浮动元素的左（或右）外边界应当是其前面的浮动元素的右（或左）外边界，除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面，如下图：
<div id="father">
<p>
This is a paragraph,my name is <em>ChengKang</em>,
my girl is <strong>PengKe</strong>.
</p>
</div>p em,p strong
{
float:left;
border:1px solid black;
}效果如下图所示：
可以发现后浮动的strong元素的左外边界是在先浮动的em元素的右外边界上（因为这里并没有设置其外边界属性，所以默认为0）.
3.还是为了防止浮动元素重叠，左浮动元素的右外边界不会在其右浮动元素的左外边界，右浮动元素的左外边界不会在其左浮动元素的右外边及左边。比较绕口，看下实例：
<div id="father">
<img src="TU.jpg" alt="tupian" class="leftcls">
<img src="TU.jpg" alt="tupian" class="rightcls">
</div>div#father
{
border:1px solid black;
background-color:silver;
width:800px;
}
img.leftcls
{
width:500px;
float:left;
}
img.rightcls
{
width:500px;
float:right;
}由于两个浮动img元素的包含块div的width只有800px，两个浮动元素的width分别为500px，为了使两个浮动元素不重叠，效果图如下：
可以看到父元素的高度没有了，这事因为浮动元素已经从正常流中删除，所以父div的行高就没有了，如果想要让父元素包含浮动的子元素，那么将父元素也设为浮动即可，效果如下：
4.一个浮动元素的顶端不能比其父元素的内边界高。很显然，这是为了限制浮动元素的一直向上浮动。
5.如果一个浮动元素在两个合并外边距之间，放置这个浮动元素的时候就好像在两个元素之间存在一个块级父元素一样。
<div id="father">
<div class="son">
This is first paragraph!
</div>
<div class="mid">
This is mid paragraph!
</div>
<div class="son">
This is last paragraph!
</div>
</div>div#father
{
border:1px solid black;
background-color:silver;
width:800px;
}
div.son
{
margin:50px 0px 0px 0px;
border:1px solid black;
background-color:green;
}
div.mid
{
margin-top:10px;
width:200px;
float:right;
border:1px solid black;
}效果如下图所示：
为了看出区别，将浮动元素的上外边距设为10px，可以发现，浮动元素并不会向上一直移动到三个div共同的父元素的顶端。
6.浮动元素不能比之前所有的浮动元素或者块级元素的顶端高。显然这是防止浮动元素一直上移，这也间接解释了第5条。
7.如果一个浮动元素之前出现了另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
如下：
<div id="father">
<div class="son">
I am the top top top!<br>
<span>This is first paragraph!<img src="TU.jpg" alt="jpgtu" width="40px"></span>
</div>
</div>div.son span
{
border:1px solid black;
}
div.son img
{
float:left;
}
8.浮动元素不能超出其父元素的内边界，除非它本身就太宽，本身就放不下。这样是为了防止当多个浮动元素出现在同一个水平行上时，出现超出其父元素内边界的情况：
可以发现如果没有足够的控件，浮动元素会被挤下来到新的一行上去。
9.浮动元素必须尽可能高的放置（在前面的规则限制下），并且左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远。（在前面的规则限制下）
示例
CSS规范中指出了浮动元素不应该超出其父元素显示（针对上边界、左边界以及右边界）。但是在实际情况中可能出现下面两种情况使得浮动元素超出其父元素宽度显示：
- 浮动元素拥有负的外边距；
<div class="father">
<img src="test.jpg" alt="night" width="300px">
<p>This is a paragraph,This is a paragraph.This is a paragraph.This is a paragraph.</p>
<h1>I LOVE U</h1>
</div>img
{
float:left;
margin:-10px 0px 0px -10px;/*负的外边距*/
}
div.father
{
width:500px;
float:left;/*父元素也浮动，使其包含其浮动的子元素*/
background-color: silver;
border:1px solid red;
}代码效果如下图：
2. 浮动元素本身就比其父元素要宽；
效果如下：
浮动元素与流内容重叠
CSS2.1规范指出当浮动元素与内容重叠时应遵循以下规则显示：
- 浮动元素与块元素重叠时，块元素的边框、背景在浮动元素之下，块元素的内容在浮动元素之上显示；
通过设置负的外边距使得浮动元素与内容重叠是一件很容易的事：
<div class="father">
<img src="test.jpg" alt="night" width="300px">
<p>This is a paragraph,This is a paragraph.This is a paragraph.This is a paragraph.</p>
<p>This is the second paragraph,<em>This is the second paragraph</em>,This is the second paragraph.</p>>
<h1>I LOVE U</h1>
</div>img
{
float:left;
margin-right: -40px;/*对左浮动元素设置右的外边距*/
}
div.father
{
float:left;/*父元素也浮动，使其包含其浮动的子元素*/
background-color: silver;
border:1px solid red;
}
div p
{
background-color: red;
}效果如下图：
可以发现，块级元素p和h1的边框和背景被浮动元素遮住但是其内容在浮动元素之上显示出来了。
2. 浮动元素与行内元素重叠时，行内元素的边框、背景和内容均在浮动元素之上显示。
img
{
float:left;
margin-right: -40px;/*对左浮动元素设置右的外边距*/
}
div.father
{
float:left;/*父元素也浮动，使其包含其浮动的子元素*/
background-color: silver;
border:1px solid black;
}
em
{
background-color: red;
border:1px solid black;
}效果如下：
很显然，行内元素em的边框、背景、内容均在浮动元素之上显示出来了。
使用clear属性可以让浮动元素禁止出现在某元素的左边或者右边或者两边。
p
{
clear:left;/*禁止左边出现浮动元素*/
}效果如下：
CSS1和CSS2是通过增加元素的上外边距，来实现这种clear效果，通过增加上外边距使得元素落到浮动元素的下方来；
CSS2.1中引入了清除区域（clearance）的概念，即在元素的外边距之外再加一层额外的清除区域，该区域不允许任何浮动元素进入这个范围。
以上是在看《CSS权威指南》时关于float的总结，小记一下。
