CSS Float

CSS Float属性是
定位属性。它用于
将元素向左或向右漂浮。，从而允许其他元素环绕它。它通常与图像和布局一起使用。

要了解其目的和用法，我们来看一下它的效果显示。在排版中图像需要设置在页面中间，以便文本根据需要环绕在页面上，图像会出现在文字中间，效果如下。
CSS Float_https://bianchenghao6.com_【CSS 教程】_第1张

常见的Web布局就会用到这些效果。

CSS Float_https://bianchenghao6.com_【CSS 教程】_第2张

实现原理

CSS float设置的元素只支持水平浮动。因此，仅可以向左或向右浮动元素，而不能向上或向下浮动元素。

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

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>下一段包含具有样式的图像
 <b>float:right</b>. 结果是图像将浮动到该段落的右侧。</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 font

CSS word-wrap