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