CSS 浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

CSS 浮动

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

CSS 浮动实例 - 向右浮动的元素

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

CSS 浮动实例 - 向左浮动的元素

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

CSS 浮动实例 2 - 向左浮动的元素

CSS float 属性

在 CSS 中，我们通过 float 属性实现元素的浮动。

如需更多有关 float 属性的知识，请访问参考手册：CSS float 属性。

行框和清理

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

因此，创建浮动框可以使文本围绕图像：

行框围绕浮动框

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

clear 属性实例 - 对行框应用 clear

这是一个有用的工具，它让周围的元素为浮动元素留出空间。

让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：

  1. .news {
  2.   background-color: gray;
  3.   border: solid 1px black;
  4.   }
  5.  
  6. .news img {
  7.   float: left;
  8.   }
  9.  
  10. .news p {
  11.   float: right;
  12.   }
  13.  
  14. <div class="news">
  15. <img src="news-pic.jpg" />
  16. <p>some text</p>
  17. </div>

这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：

clear 属性实例 - 对空元素应用清理

不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。

  1. .news {
  2.   background-color: gray;
  3.   border: solid 1px black;
  4.   }
  5.  
  6. .news img {
  7.   float: left;
  8.   }
  9.  
  10. .news p {
  11.   float: right;
  12.   }
  13.  
  14. .clear {
  15.   clear: both;
  16.   }
  17.  
  18. <div class="news">
  19. <img src="news-pic.jpg" />
  20. <p>some text</p>
  21. <div class="clear"></div>
  22. </div>

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。

不过我们还有另一种办法，那就是对容器 div 进行浮动：

  1. .news {
  2.   background-color: gray;
  3.   border: solid 1px black;
  4.   float: left;
  5.   }
  6.  
  7. .news img {
  8.   float: left;
  9.   }
  10.  
  11. .news p {
  12.   float: right;
  13.   }
  14.  
  15. <div class="news">
  16. <img src="news-pic.jpg" />
  17. <p>some text</p>
  18. </div>

这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。

事实上，站点上的所有页面都采用了这种技术，如果您打开我们使用 CSS 文件，您会看到我们对页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。

CSS clear 属性

我们刚才详细讨论了 CSS 清理的工作原理和 clear 属性应用方法。如果您希望学习更多有关 clear 属性的知识，请访问参考手册：CSS clear 属性。

浮动和清理 实例

float 属性的简单应用

使图像浮动于一个段落的右侧。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. img 
  5. {
  6. float:right
  7. }
  8. </style>
  9. </head>
  11. <body>
  12. <p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
  13. <p>
  14. <img src="/i/eg_cute.gif" />
  15. This is some text. This is some text. This is some text.
  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. </p>
  26. </body>
  28. </html>

将带有边框和边界的图像浮动于段落的右侧

使图像浮动于段落的右侧。向图像添加边框和边界。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. img 
  5. {
  6. float:right;
  7. border:1px dotted black;
  8. margin:0px 0px 15px 20px;
  9. }
  10. </style>
  11. </head>
  13. <body>
  14. <p>在下面的段落中，图像会浮动到右侧，并且添加了点状的边框。我们还为图像添加了边距，这样就可以把文本推离图像：上和右外边距是 0px，下外边距是 15px，而图像左侧的外边距是 20px。</p>
  15. <p>
  16. <img src="/i/eg_cute.gif" />
  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. This is some text. This is some text. This is some text.
  27. </p>
  28. </body>
  30. </html>

带标题的图像浮动于右侧

使带有标题的图像浮动于右侧 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. div
  5. {
  6. float:right;
  7. width:120px;
  8. margin:0 0 15px 20px;
  9. padding:15px;
  10. border:1px solid black;
  11. text-align:center;
  12. }
  13. </style>
  14. </head>
  16. <body>
  17. <div>
  18. <img src="/i/eg_cute.gif" /><br />
  19. CSS is fun!
  20. </div>
  21. <p>
  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. This is some text. This is some text. This is some text.
  27. This is some text. This is some text. This is some text.
  28. This is some text. This is some text. This is some text.
  29. This is some text. This is some text. This is some text.
  30. This is some text. This is some text. This is some text.
  31. This is some text. This is some text. This is some text.
  32. This is some text. This is some text. This is some text.
  33. This is some text. This is some text. This is some text.
  34. This is some text. This is some text. This is some text.
  35. </p>
  37. <p>
  38. 在上面的段落中，div 元素的宽度是 120 像素，它其中包含图像。div 元素浮动到右侧。我们向 div 元素添加了外边距，这样就可以把 div 推离文本。同时，我们还向 div 添加了边框和内边距。
  39. </p>
  40. </body>
  42. </html>

使段落的首字母浮动于左侧

使段落的首字母浮动于左侧，并向这个字母添加样式。 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. span
  5. {
  6. float:left;
  7. width:0.7em;
  8. font-size:400%;
  9. font-family:algerian,courier;
  10. line-height:80%;
  11. }
  12. </style>
  13. </head>
  15. <body>
  16. <p>
  17. <span>T</span>his is some text.
  18. 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. </p>
  27. <p>
  28. 在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
  29. </p>
  31. </body>
  32. </html>

创建水平菜单

使用具有一栏超链接的浮动来创建水平菜单。 

  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>
  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>
  35. <p>
  36. 在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
  37. </p>
  39. </body>
  40. </html>

创建无表格的首页

使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。 

  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>
  40. <div class="container">
  42. <div class="header"><h1 class="header">jishuchi.com</h1></div>
  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>
  46. <div class="content">
  47. <h2>Free Web Building Tutorials</h2>
  48. <p>At jishuchi.com 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>jishuchi.com - The Largest Web Developers Site On The Net!</p></div>
  52. <div class="footer">Copyright 2008 by YingKe Investment.</div>
  53. </div>
  55. </body>
  56. </html>

清除元素的侧面

本例演示如何使用清除元素侧面的浮动元素。 

  1. <html>
  3. <head>
  4. <style type="text/css">
  5. img
  6.   {
  7.   float:left;
  8.   clear:both;
  9.   }
  10. </style>
  11. </head>
  13. <body>
  14. <img src="/i/eg_smile.gif" />
  15. <img src="/i/eg_smile.gif" />
  16. </body>
  18. </html>