CSS的浮动（一）

浮动是css里面布局用的最多的属性。通过float属性实现，float有2个值，分别为left、right。表示左浮动和右浮动。

这里我们定义2个div，类名分别为“box1”和“box2”设置float：left。表示左浮动

.box1{

float: left;

width: 200px;

height: 200px;

background-color: yellowgreen;

}

.box2{

float: left;

width: 400px;

height: 400px;

background-color: skyblue;

}

显示在页面的效果如下：

可以看到通过浮动，两个元素并排了，并且两个元素都能够设置宽度、高度了。就不再分行内和块级元素了。我们称之为浮动的元素脱离了标准文档流。

可以举个例子来证明这个观点

同样是2个div

.box1{

float: left;

width: 200px;

height: 200px;

background-color: yellowgreen;

}

.box2{

width: 400px;

height: 400px;

background-color: skyblue;

}

box1有左浮动，box2没有左浮动，此时页面显示为：