CSS float 属性

实例

把图像向右浮动：

  1. img
  2.   {
  3.   float:right;
  4.   }

浏览器支持


IE Firefox Chrome Safari Opera
ie firefox chrome safari opera

所有主流浏览器都支持 float 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

定义和用法

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

默认值： none
继承性： no
版本： CSS1
JavaScript 语法： object.style.cssFloat="left"

可能的值

值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

实例

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>

相关页面

CSS 教程：CSS 定位

HTML DOM 参考手册：cssFloat 属性