标签：
浮动框就是一个框在当前行被向左或向右挪动(偏移)，它不在常规流中，浮动框由浮动元素的框组成。 浮动框( ‘float‘, ‘floated‘ or ‘floating‘ box )最有趣的特性是内容(Line Box)可以沿着它的边缘渲染（设置 ‘clear‘ 属性禁止此特性 ）。 内容排列在沿着左浮动框的右边排列，而沿着右浮动框的左边排列，也就是我们常说的文字环绕效果。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Float example</title>
<style type="text/css">
span {
float: left;
}
P {
margin: 2em;
border: 1px solid red;
width: 200px;
}
</style>
</head>
<body>
<p>
<span style="width:100px; height:100px; margin:20px;"></span>
The IMG box is floated to the left. The content that follows is formatted to the
right of the float, starting on the same line as the float.
</p>
</body>
</html>
文字应当围绕绿块的外边界排列，文字和绿色的块之间有空白。
示意图：
一个浮动框，会被向左或向右偏移，直到它的外边界1接触到它包含块2的边界或另一个浮动元素的外边界1， 如果存在一个行框，浮动框的顶边会和当前行框的顶部对齐。
如果水平方向没有足够的空间放置浮动元素，它将向下移动，直到有足够的空间或没有更多的浮动元素为止。
由于浮动框并不在常规流3中，在该浮动框之前或之后创建的非定位框垂直排列，就好象浮动框并不存在一样。 然而，浮动框之后创建的行框4会被缩短，为浮动框提供空间。如果被缩短的行框无法再容纳更多的内容， 它将向下移动，直到有足够的空间或没有更多的浮动元素为止。当前行里浮动框前的任何内容，都将被重新排列到该浮动另一侧的第一个可用行里。 也就是说，如果在遇到左浮动框之前，行内框被放置到行上，剩余的行框空间足够容纳该左浮动框，那么，左浮动框就会被放置在该行上， 并与该行框的顶端对齐，然后，已经在行上的行内框被相应地移动到该浮动框的右侧（右侧成了该左浮动框的另一侧），反之亦然，对于 rtl 和右浮动框也是一样。
如上文字环绕浮动元素的例子，包含文字的行框被缩短，是包含块减去浮动元素的外边距 margin 的宽度。其中，"The content" 两字，分别被放到了两行， 因为，一行中的剩余空间无法再容纳 "content"。
TABLE 元素、块级替换元素或者在常规流中创建了块格式化上下文5的元素，它们的 border box1 在同一个块格式化上下文5中， 一定不能覆盖任何浮动元素。如果有必要，实现工具应该通过把元素放置到前面浮动元素的下面，以清理先前说到的元素，但是，如果有足够的空间， 也可以把它紧临浮动元素放置。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Float example</title>
<style type="text/css">
#C {
margin: 2em;
border: 1px solid red;
width: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="C">
<div id="A" style="width:50px; height:50px; margin:20px; float:left;">A</div>
<div id="B" style=" width:50px; overflow:hidden;">B</div>
</div>
</body>
</html>
这时，B 的宽度为 50px，它和浮动元素 A 的包含块都是 C，宽度为 200px。浮动元素在放置后，还有足够的空间放置 B，所以，B 被紧挨着 A 的 margin 框被放置。
示意图：
增大 B 的宽度至 150px 后：
注：
| 值 | left | right | none | inherit |
| 初始值 | none |
| 适用于 | 所有元素 |
| 可否继承 | 否 |
| 百分比 | N/A |
可设置给任意元素，但只适用于生成非绝对定位框的元素 1。
注：
根元素无所谓是否浮动，没有实际意义，因此对于根元素的浮动，浏览器应该当作 "none"。
浮动框定位的宗旨是，在其左、上、右外边界不溢出包含块边界的情况下，尽量的靠上、靠左（"float:left"）或靠右（"float:right"）放置，但是不能高于它前面生成的块框、浮动框和行框的顶边，并且不能与其他浮动元素重叠。
以下规则中说到的其他元素，都和浮动元素处于相同的块格式化上下文 1中。
左浮动框的左外边界3不可以出现在它包含块2左边界之左。对于右浮动的元素也有类似规则。
左浮动元素的左外边界不能溢出包含块的左边界。右浮动元素不能溢出包含块的右边界。
如果当前框是左浮动框，并且在源文档中存在更早生成的左浮动框，那么对于任意这些先前的框，要么当前框的左外边出现在先前框的右外边之右，要么它的顶部必须在先前框的底部之下。对于向右浮动的框也有类似的规则。
也就是说，当前浮动框的定位会受到先前生成的同向浮动框的影响，它们不能相互遮盖。当前浮动框需要紧挨着先前同向浮动框的外边界进行定位，如果当前行空间不足，则折行，放置到它之前浮动框的下面。
左浮动框的右外边不可以出现在它右侧的任何右浮动框的左外边之右。对于向右浮动的元素也有类似的规则。
也就是说，同一行中不同向的浮动框不能够有互相折叠的现象。
浮动框的顶外边不能高于它包含块的顶部。另外，当一个浮动框发生在两个外边距折叠的中间时，浮动元素的定位好像它有另一个空的块级父框位于常规流中。
也就是说，当浮动框处于两个发生外边距折叠的地方时，会被当作包含在一个空的块框中，它上面和下面的外边距会穿过它发生外边距折叠，当它不存在。
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
color: white;
margin: 50px;
}
</style>
<div>A</div>
<div style="float:left; margin:10px; ">O</div>
<div>B</div>
以上代码中，3 个 DIV 元素的包含块是初始包含块。浮动框 O 处于 A 和 B 的中间，不应当妨碍 A 和 B 的外边距折叠。
示意图：
此处在 IE 中存在兼容性问题4，请自行测试。
示例代码：
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
color: white;
margin: 10px 0;
}
</style>
<div style="width:180px; height:auto; overflow:hidden; background:white; border:1px solid gold;">
<div style="float:left;">O</div>
<div style="float:left; ">A</div>
<div style="float:right; width:50px; ">B</div>
</div>
O、A、B 都是浮动元素，O、A 是左浮动元素，根据宽度计算，A 应该处于 O 的下一行。B 是右浮动浮动元素。按照标准，B 浮动的时候，其顶边不应高于 A 的顶边，因此，B 不会放到 O 的右侧显示。
示意图：
改变代码中 A 和 B 的位置，即可让 B 显示在 O 的右侧，读者可自行测试。
浮动框的顶边不可以高于源文档中先前元素产生的任何包含一个框的行框的顶。
<div style="width:400px; height:50px;border:1px solid red;">
<div style=" float:left; width:250px;">left</div>
<span style="border:1px solid yellow;">blublublublublublublublublublublublu</span>
<div style=" float:right;">right</div>
</div>
示意图：
按照规则，right 浮动框的顶边不能高于含有行内框的行框的顶边。
IE 在处理行框与浮动框之间位置关系时，跟其他浏览器不同5，可自行验证。
左浮动框左边如果有另外一个左浮动框，它的右外边不可以出现在它包含块的右边之右。（或者比较宽松的要求是：一个左浮动不可以超出右边， 除非它已经尽可能地靠左排列。）对于向右浮动的元素也有类似的规则。此条规则也是限定浮动元素的位置范围， 不可超出包含块。与第 1，2 条有关。
注意在前面关于其顶边规则的限制下，满足此条。
和第 8 条一起，可以算是浮动的大规则，说明浮动框要尽量的向上向左或向上向右放。
对于 ‘clear‘ 特性值不是 ‘none‘ 的浮动框，其上外边界( top margin edge )必须低于前面所有左浮动框（‘clear‘ 特性值为 "left" 时），或者右浮动框（"clear:right"），或者左右浮动框("clear:both")的下外边界。
示例代码：
<div id="Container" style="width:300px; height:100px; border:1px solid gold; ">
<div id="DIV1" style="float:right; width:150px; height: 50px; ">float:right;</div>
<div id="DIV2" style="float:left; width:100px; height: 50px; clear:right;">clear:right float:left;</div>
</div>
示意图：
这条补充规则，IE 中没有很好的贯彻6，您可以自行验证。
注:
‘clear‘ 特性是对浮动框和常规流中框的一种位置关系上的平衡。
| 值： | none | left | right | both | inherit |
| 初始值： | none |
| 适用于 | 块级元素 |
| 可否继承 | 否 |
| 计算值 | 同设定值 |
该特性表明一个元素框的哪一边不可以和先前的浮动框相邻。‘clear‘ 特性不考虑它自身包含的浮动子元素和不处于同一个块格式化上下文中的浮动元素。
对于插入框，该属性适用于插入框所属的最后的块框。
间隙( Clearance )以元素顶外边距上方空白的方式被引入。它用来把元素垂直（典型情况是向下）推过浮动框。它是一个值1。
可以简单的认为设置了 ‘clear‘ 特性值的元素，其 top border edge 要放在相关的浮动元素的 bottom margin edge 之下。注意这两种元素接触边界的区别。一个是 border，一个是 margin。
示例代码：
<div style="width:300px; height:100px; float:left; border:5px solid red; margin-bottom:10px; ">
float
</div>
<div style="clear:left; width:350px; height:50px; border:5px solid yellow; margin-top:50px;">
clearance
</div>
示意图：
这与外边距折叠无关，因为浮动元素不与其他元素发生外边距折叠2。
标签：
原文地址：http://www.cnblogs.com/huangyin1213/p/5549032.html
