2016.3.14__CSS 浮动__第五天

如果您觉得这篇文章还不错，可以去H5专题介绍中查看更多相关文章。

今日课程总览

---

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

CSS 浮动原理介绍

CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块表现得就像浮动框不存在一样。

float效果展示

基本设置

在网页中正常添加3个div色块:

HTML代码: 
<div class="div1">
    div1
div>
<div class="div2">
    div2
div>
<div class="div3">
    div3
div>

简单设置一些大小和颜色：

CSS代码: 
.div1 {
    width: 100px;
    height: 100px;
    background-color: cyan;
}
.div2 {
    width: 100px;
    height: 100px;
    background-color: skyblue;
}
.div3 {
    width: 100px;
    height: 100px;
    background-color: green;
}

效果如下：

正常情况下，3个div从上至下依次排序

下面，我们来使用下float属性，并设置值right

给div1标签添加float属性

.div1 {
    width: 100px;
    height: 100px;
    background-color: cyan;
    float: right;
}

效果如下：

我们会发现，div1跑到了屏幕的右侧，这就是让它浮动到右侧的表现。

同时给3个div都设置float: left

.div1 {
    width: 100px;
    height: 100px;
    background-color: cyan;
    float: left;
}
.div2 {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    float: left;
}
.div3 {
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}

效果如下：

当我们把3个div都设置了向左浮动之后，就可以实现这种横排布局

修改CSS代码，如下：

.div1 {
    width: 100px;