CSS 浮动属性float-之路教程

CSS float 属性值说明

值	描述
none	意味着元素未浮动，它将显示在文本中的位置。这是此属性的默认值。
left	意味着元素浮到左侧。
right	意味着元素漂浮到右侧。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

语法

float: none | left | right | initial | inherit;

浮动属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Float 属性示例</h2>
    <img src="/onitroad-logo.png" alt="W3dcos">
    <p>
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </p>
  </body>
</html>

在以下示例中，图像向左浮动。

使用 float 属性浮动图像的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: left;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Float 属性示例</h2>
    <img src="/onitroad-logo.png" alt="W3dcos">
    <p>
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

    </p>
  </body>
</html>

CSS 浮动属性float

float 属性定义元素应该放置在容器的哪一侧，从而允许文本或者其他元素环绕它。
该属性具有三个值：none、left 和 right。

此属性与 clear 属性直接相关，该属性定义元素是应该在浮动元素旁边还是应该在浮动元素之下（clear）。

如果元素是绝对定位的（位置：绝对），则浮动属性将被忽略。

初始值	none
应用于	所有元素。
继承	无效
可动画的	无效
版本	CSS1.
DOM 语法	object.style.cssfloat = "right";

日期：2020-06-02 22:14:30 来源：oir作者：oir

←CSS flex 属性

CSS :focus 伪类→

CSS float 属性值说明

语法

浮动属性示例：

使用 float 属性浮动图像的示例：

目录