个性化阅读
专注于IT技术分析

CSS浮动float

本文概述

CSS float属性是一个定位属性。它用于将一个元素向左或向右推, 允许其他元素环绕它。通常用于图像和布局。

要了解其目的和来源, 让我们看一下它的印刷显示。在打印显示器中, 图像设置在页面中, 以便根据需要将文本环绕在页面中。

CSS浮动打印布局

它的Web布局也与打印布局类似。

CSS Float Web布局

怎么运行的

元素仅水平浮动。因此, 仅可以向左或向右浮动元素, 而不能向上或向下浮动元素。

  1. 浮动元素可以尽可能向左或向右移动。简单来说, 这意味着浮动元素可以显示在最左侧或最右侧。
  2. 浮动元素之后的元素将在其周围流动。
  3. 浮动元素之前的元素不会受到影响。
  4. 如果图像向右浮动, 则文本在其周围向左流动;如果图像向左浮动, 则文本在其周围向右流动。

CSS浮动属性

属性 描述 价值观
clear clear属性用于避免在浮动元素之后流动的元素。 左, 右, 两者, 无, 继承
float 它指定盒子是否应该浮动。 左, 右, 无, 继承

CSS浮动属性值

描述
none 它指定该元素未浮动, 并将显示在文本中刚出现的位置。这是默认值。
left 用于将元素浮动到左侧。
right 它用于使元素向右浮动。
initial 它将属性设置为其初始值。
inherit 它用于从其父元素继承此属性。

CSS Float属性示例

让我们看一个简单的示例, 以了解CSS float属性。

<!DOCTYPE html>
<html>
<head>
<style>
img {
    float: right;
}
</style>
</head>
<body>
<p>The following paragraph contains an image with style 
<b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<img src="good-morning.jpg" alt="Good Morning Friends"/> 
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
赞(0) 打赏
未经允许不得转载:srcmini » CSS浮动float
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏