Web速查-索引

float

定义

float 属性定义元素在哪个方向浮动。

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

语法

float:none|left|right|inherit;

注意：A是其他值，共计10余种，见下表所示。

属性值

值 说明 （索引中有详细介绍）
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
left 元素向左浮动。
right 元素向右浮动。
inherit 规定应该从父元素继承 float 属性的值。

实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>

    <style type="text/css">

        img

        {

            float:right

        }

    </style>

</head>

<body>

   <p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>

   <p>

       <img src="../img/logo.png" />

       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur, at atque aut cupiditate delectus ea earum error eveniet hic in iusto, laudantium nihil, tenetur ut vel velit voluptate voluptates?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolore in nemo quam recusandae. Delectus dicta distinctio nobis quia sed similique, vero! Debitis inventore labore, quidem tempore totam velit voluptas.

   </p>

</body>

</html>

在下面的段落中，我们添加了一个样式为 float:right 的图像。结果是这个图像会浮动到段落的右侧。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur, at atque aut cupiditate delectus ea earum error eveniet hic in iusto, laudantium nihil, tenetur ut vel velit voluptate voluptates?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolore in nemo quam recusandae. Delectus dicta distinctio nobis quia sed similique, vero! Debitis inventore labore, quidem tempore totam velit voluptas.

浏览器支持

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

Safari Chrome FireFox IE
3.1 4.0 3.0 8.0