CSS Float（浮动）

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

浮动的分类：

　　left: 左浮动

　　 right: 右浮动

　　 none: 默认值，不浮动

　　 inhert: 继承父亲框的浮动属性

特性：

脱离标准文档流，摆脱块级元素与行内元素的限制。

自动贴靠，超出行宽时，下个同级元素自动找空隙贴靠。与浮动的元素高度相加超过浮动元素的前一个元素的高度时，才自动换行。

脱离标准文档流，却没有脱离文本流。碰到文本会出现被包围效果，称为字围效果。　　

收缩效果，如果父元素没有设置高度，父元素会变成内容宽高，如果没有内容，父元素消失。

使用方法

　浮动：float 向左浮动：left 向右浮动：right

　　浮动块元素

　　　　　　浮动块元素如果超出设定的区域范围会自动换行，

　　　　　　注意：外层加标签（想要谁浮动外层加标签）并给设定区域

常见的几种方式：

　　　元素单独浮动

　　　　　　元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

　　　　　　一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

　　　　　　浮动元素之后的元素将围绕它。

　　　　　　浮动元素之前的元素将不会受到影响。

　　　例：如果图像是右浮动，下面的文本流将环绕在它左边：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title></title>
 6 <style>
 7 img 
 8 {
 9     float:right;
10 }
11 </style>
12 </head>
13 <body>
14 <p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
15 <p>
16 <img src="logocss.gif" width="95" height="84" />
17 这是一些文本。这是一些文本。这是一些文本。
18 </p>
19 </body>
20 </html>

如图所示：

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

例如图片排序，代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title></title> 
 6 <style>
 7 .thumbnail 
 8 {
 9     float:left;
10     width:110px;
11     height:90px;
12     margin:5px;
13 }
14 </style>
15 </head>
16 <body>
17 <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
18 <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
19 <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
20 <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
21 <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
22 <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
23 </body>
24 </html>