在“8.4 文字环绕-初识float”这一节中，我们已经知道浮动（即float属性）是怎样一回事了。在传统的印刷布局中，文本可以按照实际需要来围绕图片（回想你看过的书的排版就知道了）。我们一般把这种方式称为“文本环绕”。在前端开发中，使用了浮动的页面元素其实就像在印刷布局里被文字包围的图片一样。这样对比，就很好理解了。

浮动是CSS布局的最佳利器，我们可以通过浮动来灵活地定位页面元素，以达到布局网页的目的。例如我们可以通过设置float属性让元素向左浮动或者向右浮动，以便让周围的元素或文本环绕着这个元素。

语法：

float: 取值;

说明：

float属性取值只有2个，如下表所示。

表1 float属性取值
属性值 说明
left 元素向左浮动
right 元素向右浮动

举例：

在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义父元素样式*/
        #father
        {
            width:300px;
            background-color:#0C6A9D;
            border:1px solid silver;
        }
        /*定义子元素样式*/
        #father div
        {
            padding:10px;
            margin:15px;
        }
        #son1
        {
            background-color:hotpink;
            /*这里设置son1的浮动方式*/
        }
        #son2
        {
            background-color:#FCD568;
            /*这里设置son2的浮动方式*/
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
    </div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

在这个代码中，定义了3个div块：一个是父块，另外两个是它的子块。为了便于观察，我们为每一个块都加上了背景颜色，并且让块与块之间加上一定的外边距。

从上图可以看出，如果两个子块都没有设置浮动，由于div是块元素，因此会各自向右延伸，并且自上而下排列。

1．设置第1个div浮动

#son1
{
    background-color:hotpink;
    float:left;
}

浏览器预览效果如下图所示。

分析：

由于box1设置为左浮动，box1变成了浮动元素，因此此时box1的宽度不再延伸，而是由内容宽度决定其宽度。接着相邻的下一个div元素（box2）就会紧贴着box1，这是由于浮动引起的效果。

小伙伴们可以尝试在本地编辑器中，设置box1右浮动，然后看看实际效果如何？

2．设置第2个div浮动

#son2
{
    background-color:#FCD568;
    float:left;
}

浏览器预览效果如下图所示。

分析：

由于box2变成了浮动元素，因此box2也跟box1一样，宽度不再延伸，而是由内容确定宽度。如果box2后面还有其他元素，则其他元素也会紧贴着box2。

细心的小伙伴估计看出来了，怎么父元素变成一条线了呢？其实这是浮动引起的问题。至于怎么解决，我们在下一节会介绍。

浮动，可以使得元素移到左边或者右边，并且允许后面的文字或元素环绕着它。浮动最常用于实现水平方向上的并排布局，例如两列布局、多列布局，如。图22-8所示。也就是说，如果你想要实现两列并排或者多列并排效果时，首先考虑的是使用浮动来实现。