参考手册
CSS 教程
CSS 浮动清除
CSS inline-block

CSS 布局 - 浮动实例

本页提供常见的浮动案例。

网格 / 等宽的框

Box 1

Box 2

Box 1

Box 2

Box 3

通过使用 float 属性，可以轻松地并排浮动内容框：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. * {
  6.   box-sizing: border-box;
  7. }
  9. .box {
  10.   float: left;
  11.   width: 33.33%;
  12.   padding: 50px;
  13. }
  15. .clearfix::after {
  16.   content: "";
  17.   clear: both;
  18.   display: table;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h1>网格框</h1>
  26. <p>并排浮动的框：</p>
  28. <div class="clearfix">
  29.   <div class="box" style="background-color:#bbb">
  30.   <p>框中的一些文本。</p>
  31.   </div>
  32.   <div class="box" style="background-color:#ccc">
  33.   <p>框中的一些文本。</p>
  34.   </div>
  35.   <div class="box" style="background-color:#ddd">
  36.   <p>框中的一些文本。</p>
  37.   </div>
  38. </div>
  40. <p>请注意，我们还用了 clearfix hack 来处理布局流，并添加了 box-sizing 属性，以确保框不会由于额外的内边距（填充）而损坏。尝试删除此代码以查看效果。</p>
  42. </body>
  43. </html>
运行一下

什么是 box-sizing？

您可以轻松地并排创建三个浮动框。但是，当您添加一些内容来扩大每个框的宽度（例如，内边距或边框）时，这个框会被破坏。 box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会被破坏。

您可以访问本站的 CSS Box Sizing 这一章中学习有关 box-sizing 属性的更多知识。

图像并排

Italy
Forest
Mountains

这种框格（The grid of boxes）也可以用来并排显示图像：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. * {
  6.   box-sizing: border-box;
  7. }
  9. .img-container {
  10.   float: left;
  11.   width: 33.33%;
  12.   padding: 5px;
  13. }
  15. .clearfix::after {
  16.   content: "";
  17.   clear: both;
  18.   display: table;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h1>并排的图像</h1>
  26. <p>并排浮动图像：</p>
  28. <div class="clearfix">
  29.   <div class="img-container">
  30.   <img src="/znadmin/md/1241/0.jpg" style="width:100%">
  31.   </div>
  32.   <div class="img-container">
  33.   <img src="/znadmin/md/1241/1.jpg" style="width:100%">
  34.   </div>
  35.   <div class="img-container">
  36.   <img src="/znadmin/md/1241/2.jpg" style="width:100%">
  37.   </div>
  38. </div>
  40. <p>请注意，我们还用了 clearfix hack 来处理布局流，并添加了 box-sizing 属性以确保图像容器不会由于额外的内边距（填充）而损坏。请尝试删除此代码以查看效果。</p>
  42. </body>
  43. </html>
运行一下

等宽的框

在上例中，您学习了如何以相等的宽度并排浮动框。但是，创建具有相同高度的浮动框并不容易。不过，快速解决方案是设置一个固定的高度，如下例所示：

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. * {
  6.   box-sizing: border-box;
  7. }
  9. .box {
  10.   float: left;
  11.   width: 50%;
  12.   padding: 50px;
  13.   height: 300px;
  14. }
  16. .clearfix::after {
  17.   content: "";
  18.   clear: both;
  19.   display: table;
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <h1>等高框</h1>
  26. <p>有相同高度的浮动框：</p>
  28. <div class="clearfix">
  29.   <div class="box" style="background-color:#bbb">
  30.   <h2>Box 1</h2>
  31.   <p>Some content, some content, some content</p>
  32.   </div>
  33.   <div class="box" style="background-color:#ccc">
  34.   <h2>Box 2</h2>
  35.   <p>Some content, some content, some content</p>
  36.   <p>Some content, some content, some content</p>
  37.   <p>Some content, some content, some content</p>
  38.   </div>
  39. </div>
  41. <p>这个例子不是很灵活。如果可以保证框中始终有相同数量的内容，则可以使用 CSS 高度，但并非总是如此。如果您在手机上尝试上例（或调整浏览器窗口的大小），则会看到第二个框的内容将显示在框的外部。</p>
  42. <p>如果这不是您想要的，请返回教程并学习另一个解决方案。</p>
  44. </body>
  45. </html>
运行一下

但是，这么做就失去了弹性。如果可以保证框中始终有相同数量的内容，那是可以的。但是很多时候，内容是不一样的。如果您在手机上尝试上例，则会看到第二个框的内容将显示在框的外部。这是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长：

实例

使用 Flexbox 创建弹性框：

Box 1 - 这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。
Box 2 - 我的高度将跟随框 1。

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .flex-container {
  6.   display: flex;
  7.   flex-wrap: nowrap;
  8.   background-color: DodgerBlue;
  9. }
  11. .flex-container .box {
  12.   background-color: #f1f1f1;
  13.   width: 50%;
  14.   margin: 10px;
  15.   text-align: center;
  16.   line-height: 75px;
  17.   font-size: 30px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <h1>弹性框</h1>
  24. <div class="flex-container">
  25.   <div class="box">框 1 - 这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。</div>
  26.   <div class="box">框 2 - 我的高度与框 1 保持一致。</div>
  27. </div>
  29. <p>请尝试调整浏览器窗口的大小，以查看弹性布局。</p>
  30. <p><b>注释：</b>Internet Explorer 10 或更早的版本不支持 Flexbox。</p>
  32. </body>
  33. </html>
运行一下

Flexbox 的唯一问题是它在 Internet Explorer 10 或更早版本中不起作用。您可以访问本站的 CSS Flexbox 章节中学习有关 Flexbox 布局模块的更多知识。

导航菜单

将 float 与超链接列表一起使用，来创建水平菜单：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9.   overflow: hidden;
  10.   background-color: #333;
  11. }
  13. li {
  14.   float: left;
  15. }
  17. li a {
  18.   display: inline-block;
  19.   color: white;
  20.   text-align: center;
  21.   padding: 14px 16px;
  22.   text-decoration: none;
  23. }
  25. li a:hover {
  26.   background-color: #111;
  27. }
  29. .active {
  30.   background-color: red;
  31. }
  32. </style>
  33. </head>
  34. <body>
  36. <ul>
  37.   <li><a href="#home" class="active">Home</a></li>
  38.   <li><a href="#news">News</a></li>
  39.   <li><a href="#contact">Contact</a></li>
  40.   <li><a href="#about">About</a></li>
  41. </ul>
  43. </body>
  44. </html>
运行一下

Web 布局实例

使用 float 属性完成整个 Web 布局也很常见：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. * {
  6.   box-sizing: border-box;
  7. }
  9. .header, .footer {
  10.   background-color: grey;
  11.   color: white;
  12.   padding: 15px;
  13. }
  15. .column {
  16.   float: left;
  17.   padding: 15px;
  18. }
  20. .clearfix::after {
  21.   content: "";
  22.   clear: both;
  23.   display: table;
  24. }
  26. .menu {
  27.   width: 25%;
  28. }
  30. .content {
  31.   width: 75%;
  32. }
  34. .menu ul {
  35.   list-style-type: none;
  36.   margin: 0;
  37.   padding: 0;
  38. }
  40. .menu li {
  41.   padding: 8px;
  42.   margin-bottom: 8px;
  43.   background-color: #33b5e5;
  44.   color: #ffffff;
  45. }
  47. .menu li:hover {
  48.   background-color: #0099cc;
  49. }
  50. </style>
  51. </head>
  52. <body>
  54. <div class="header">
  55.   <h1>大武汉</h1>
  56. </div>
  58. <div class="clearfix">
  59.   <div class="column menu">
  60.     <ul>
  61.       <li>航班</li>
  62.       <li>城市</li>
  63.       <li>景点</li>
  64.       <li>美食</li>
  65.     </ul>
  66.   </div>
  68.   <div class="column content">
  69.     <h1>城市</h1>
  70.     <p>武汉，简称“汉”，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽。
  71. </p>
  72.     <p>在后面的章节中，您将了解更多有关 web 布局和响应式 web 页面的信息。</p>
  73.   </div>
  74. </div>
  76. <div class="footer">
  77.   <p>页脚文本</p>
  78. </div>
  80. </body>
  81. </html>
运行一下

所有 CSS 浮动属性

属性描述
box-sizing定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框。
clear指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。
float指定元素应如何浮动。
overflow指定如果内容溢出元素框会发生什么情况。
overflow-x指定当溢出元素的内容区域时，如何处理内容的左/右边缘。
overflow-y指定当溢出元素的内容区域时，如何处理内容的上/下边缘。
CSS 浮动清除
CSS inline-block

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML