怎样使用float属性设置元素的浮动

本节将介绍什么是浮动，怎样使用float属性设置元素的浮动。

1、浮动的定义

元素排版布局过程中，元素会默认自动从左往右、从上往下流式排列，这种排列方式称为文档流。

浮动使元素脱离文档流并按照指定方向发生移动，遇到父级边界或相邻的浮动元素时停下来。

【例】创建3个div元素，在普通文档流下排列如图1所示。CSS代码如下。

.box1{
   width: 100px;
   height: 100px;
   background-color: #ea7070;
   line-height: 100px;
}
.box2{
   width: 200px;
   height: 200px;
   background-color: #fdc4b6;
   line-height: 200px;
}
.box3{
   width: 300px;
   height: 300px;
   background-color: #e59572;
   line-height: 300px;
}
.box{
   font-size: 22px;
   text-align: center;
   color: grey;
}

图1 创建3个div元素

HTML代码如下。

<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>

2、float属性

float属性规定一个元素是否浮动，以及浮动的方向。

float属性可能的值如表1所示。

表1　float属性可能的值

给例1标准文档流中的的3个元素分别加上float: left属性，元素将脱离文档流，在同一行遵循从左到右的排列顺序，如图2所示。CSS代码如下。

.box{
   font-size: 22px;
   text-align: center;
   color: grey;
   float: left;
}

图2 向左浮动

给例1的元素设置CSS样式float: right，如图3所示，此时元素遵循从右向左的排列顺序，3个元素的位置从之前由小到大的box1、box2、box3，变成了从大到小的box3、box2、box1。

CCS代码如下。

.box{
   font-size: 22px;
   text-align: center;
   color: grey;
   float: right;
}

图3 向右浮动

在布局页面时，一般不会给多个元素添加向右浮动的样式。使用float:right时，要求结构中的元素顺序相反，影响了代码的可读性与可维护性。

为了解决这个问题，可以将需要向右浮动的元素装进一个父级盒子中，设置父级盒子向右浮动，盒子内部的子级仍然采用向左浮动的样式，如图4所示。

图4 设置父级盒子向右浮动