CSS文字怎么浮动？下面本篇文章就来给大家介绍一下使用CSS浮动文字的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
在CSS中，可以使用float属性来让文字浮动。float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
属性值：
-
left：元素向左浮动。
-
right：元素向右浮动。
-
none：默认值。元素不浮动，并会显示在其在文本中出现的位置。
示例1：文字向右浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.f {
float: right;
}
</style>
</head>
<body>
<div>正常文字1</div>
<div>正常文字2</div>
<div class="f">浮动的文字</div>
<div>正常文字4</div>
<div>正常文字5</div>
</body>
</html>
效果图：
示例2：文字向左浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.f {
float:left;
}
</style>
</head>
<body>
<div>正常文字1</div>
<div>正常文字2</div>
<div class="f">浮动的文字</div>
<div>正常文字4</div>
<div>正常文字5</div>
</body>
</html>
效果图：
首先，向左浮动后，会把“坑”让出来，这个时候"正常的文字4“ 就会过来试图占这个坑，但是，发现 “浮动的文字”并没有走，结果，就只好排在它后面了
示例3：文字围绕图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.f {
float: left;
}
div {
width: 320px;
}
</style>
</head>
<body>
<div>
<img src="http://how2j.cn/example.gif" />
<p>
当图片不浮动时，文字就会换行出现在下面 当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面 当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面 当图片不浮动时，文字就会换行出现在下面
</p>
</div>
<div>
<img class="f" src="http://how2j.cn/example.gif" />
<p>
当图片浮动时，文字围绕着图片 当图片浮动时，文字围绕着图片 当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片 当图片浮动时，文字围绕着图片
</p>
</div>
</body>
</html>
效果图：
说明：
当图片不浮动时，文字就会换行出现在下面；当图片浮动时，文字围绕着图片。
当图片浮动的时候，就会让出这个“坑”出来，这个时候文字就试图去填补这个“坑”，结果发现，尼玛，图片没走，那就只好围绕图片摆放了
