CSS float 属性

让图像向右侧浮动：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    img {
      float: right;
    }
  </style>
</head>

<body>
  <p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
  <p>
    <img src="/examples/logocss.gif" width="95" height="84" /> 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。
  </p>
</body>

</html>

尝试一下 »

属性定义及使用说明

float属性指定一个盒子（元素）是否应该浮动。

注意： 绝对定位的元素忽略float属性！

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

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
float 1.0 4.0 1.0 1.0 7.0

属性值

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

更多实例

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    span {
      float: left;
      width: 1.2em;
      font-size: 400%;
      font-family: algerian, courier;
      line-height: 80%;
    }
  </style>
</head>

<body>
  <p>
    <span>这</span>是一些文本。 这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。
  </p>

  <p>
    在上面的段落中, 第一个字嵌入在span 元素中。 这个 span 元素的宽度是当前字体大小的1.2倍。 这个 span 元素是当前字体的400%(相当大)， line-height 为80%。 文字的字体为"Algerian"。
  </p>

</body>
</html>

尝试一下 »

创建一个水平菜单 - 使用浮动来创建水平菜单的超链接列表。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    ul {
      float: left;
      width: 100%;
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

    a {
      float: left;
      width: 6em;
      text-decoration: none;
      color: white;
      background-color: purple;
      padding: 0.2em 0.6em;
      border-right: 1px solid white;
    }

    a:hover {
      background-color: #ff3300;
    }

    li {
      display: inline;
    }
  </style>
</head>

<body>
  <ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
  </ul>

  <p>
    上面的示例中,我们让ul元素和元素浮动。 li元素将显示为内联元素(没有换行符的元素之前或之后)。这迫使列表为一行。 ul元素的宽度的100%,每一个超链接列表的宽度6 em(当前字体大小的6倍)。 我们添加一些颜色和边界使其更高档。
  </p>

</body>
</html>

尝试一下 »

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    div.container {
      width: 100%;
      margin: 0px;
      border: 1px solid gray;
      line-height: 150%;
    }

    div.header,
    div.footer {
      padding: 0.5em;
      color: white;
      background-color: gray;
      clear: left;
    }

    h1.header {
      padding: 0;
      margin: 0;
    }

    div.left {
      float: left;
      width: 160px;
      margin: 0;
      padding: 1em;
    }

    div.content {
      margin-left: 190px;
      border-left: 1px solid gray;
      padding: 1em;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="header">
      <h1 class="header">mifengjc.com</h1>
    </div>
    <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>
    <div class="content">
      <h2>Free Web Building Tutorials</h2>
      <p>At mifengjc you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
      <p>mifengjc - The Largest Web Developers Site On The Net!</p>
    </div>
    <div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
  </div>

</body>
</html>

尝试一下 »

相关文章

CSS 教程: CSS Float