一、CSS浮动简介
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动主要在div+css布局时使用。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失；如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
二、float属性
float 属性就是CSS中的浮动，定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
float属性的取值有none（默认值，元素不浮动），left（左浮动）和right（右浮动）等。
float简单示例：
View Code
1 <html> 2 <head> 3 <style type="text/css"> 4 img 5 { 6 /*设置图片向右浮动*/ 7 float:right 8 } 9 </style> 10 </head> 11 12 <body> 13 <p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p> 14 <p> 15 <img src="/i/eg_cute.gif" /> 16 This is some text. This is some text. This is some text. 17 This is some text. This is some text. This is some text. 18 This is some text. This is some text. This is some text. 19 This is some text. This is some text. This is some text. 20 This is some text. This is some text. This is some text. 21 This is some text. This is some text. This is some text. 22 This is some text. This is some text. This is some text. 23 This is some text. This is some text. This is some text. 24 This is some text. This is some text. This is some text. 25 This is some text. This is some text. This is some text. 26 </p> 27 </body> 28 29 </html>
三、clear属性
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像：
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
clear简单示例：
View Code
1 <html> 2 3 <head> 4 <style type="text/css"> 5 img 6 { 7 float:left; 8 clear:both; 9 } 10 </style> 11 </head> 12 13 <body> 14 <img src="/i/eg_smile.gif" /> 15 <img src="/i/eg_smile.gif" /> 16 </body> 17 18 </html>
四、浮动应用示例
1.创建水平菜单
View Code
1 <html> 2 <head> 3 <style type="text/css"> 4 ul 5 { 6 float:left; 7 width:100%; 8 padding:0; 9 margin:0; 10 list-style-type:none; 11 } 12 a 13 { 14 float:left; 15 width:7em; 16 text-decoration:none; 17 color:white; 18 background-color:purple; 19 padding:0.2em 0.6em; 20 border-right:1px solid white; 21 } 22 a:hover {background-color:#ff3300} 23 li {display:inline} 24 </style> 25 </head> 26 27 <body> 28 <ul> 29 <li><a href="#">Link one</a></li> 30 <li><a href="#">Link two</a></li> 31 <li><a href="#">Link three</a></li> 32 <li><a href="#">Link four</a></li> 33 </ul> 34 35 <p> 36 在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。 37 </p> 38 39 </body> 40 </html>
2.创建无表格的首页
View Code
1 <html> 2 <head> 3 <style type="text/css"> 4 div.container 5 { 6 width:100%; 7 margin:0px; 8 border:1px solid gray; 9 line-height:150%; 10 } 11 div.header,div.footer 12 { 13 padding:0.5em; 14 color:white; 15 background-color:gray; 16 clear:left; 17 } 18 h1.header 19 { 20 padding:0; 21 margin:0; 22 } 23 div.left 24 { 25 float:left; 26 width:160px; 27 margin:0; 28 padding:1em; 29 } 30 div.content 31 { 32 margin-left:190px; 33 border-left:1px solid gray; 34 padding:1em; 35 } 36 </style> 37 </head> 38 <body> 39 40 <div class="container"> 41 42 <div class="header"><h1 class="header">W3School.com.cn</h1></div> 43 44 <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div> 45 46 <div class="content"> 47 <h2>Free Web Building Tutorials</h2> 48 <p>At W3School.com.cn you will find all the Web-building tutorials you need, 49 from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p> 50 <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div> 51 52 <div class="footer">Copyright 2008 by YingKe Investment.</div> 53 </div> 54 55 </body> 56 </html>
参考：http://www.w3school.com.cn/css/css_positioning_floating.asp