CSS float浮动

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

为了了解它的用途和起源,让我们来看看它的印刷显示。在打印显示中,图像被设置到页面中,以便文本根据需要环绕它。

CSS 浮动打印布局

它的网页布局也类似于打印布局。

CSS 浮动网页布局

这个怎么运作

元素仅水平浮动。所以只能向左或向右浮动元素,不能向上或向下浮动。

  1. 浮动元素可以尽可能向左或向右移动。简单地说,这意味着浮动元素可以显示在最左侧或最右侧。

  2. 浮动元素之后的元素将围绕它流动。

  3. 浮动元素之前的元素不会受到影响。

  4. 如果图像向右浮动,则文本围绕它向左流动;如果图像向左浮动,则文本围绕它向右流动。

CSS 浮动属性

样式描述属性值
clearclear 属性用于避开围绕它流动的浮动元素之后的元素。left, right, both, none, inherit
float它指定框是否应该浮动。left, right, none, inherit

CSS 浮点属性值

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

CSS Float 属性示例

让我们看一个简单的例子来理解CSS float 属性。

例子 (Example)

<!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>

上一主题 CSS Buttons按钮 下一主题 CSS Font字体
  • 使用社交账号登录,本站支持
全部评论(0)