div的浮动(float)

什么是浮动

浮动，故名思议，就是移动位置。

之所以不叫移动，而叫浮动，那是因为给元素设置浮动后，元素会浮到文档上面来，术语叫脱离文档流。

例子

下面我们看例子

有三个div，其中一个大的#div0，里面含有两个子div，#div1和#div2。

可以看到，大的黄色#div0，嵌套了一个灰色的#div1和一个蓝色的#div2。

由于div是块级元素，所以灰色和黄色的div不会在同一排显示。

测试1

这个时候，我们给#div1，设置右浮动。

#div1 {

/* 设置背景色为灰色 */

background-color:#888;

/* 右浮动 */

float:right;

}

这个时候，可以看到，灰色的#div1到右边去了。

而黄色#div0的高度，只有一半了。

这是因为，当#div1浮动到右边后，它就脱离文档流了，来到文档的上方，也就是和原来的#div0、#div2不在同一个层面上了。

这时候，#div0的高度，就等于是现在还在同一层面上#div2的高度。

测试2

我们再给#div2做个左浮动

#div2 {

/* 设置背景色为蓝色 */

background-color:#08c;

/* 左浮动 */

float:left;

}

发现#div0居然不见了，但是可以图片顶部，出现#div0的边框。

这是由于，#div1和#div2都设置了浮动，它们都脱离了文档流，和#div0不在同一个层面上了。

也就是#div0里面没有了内容，就坍塌的只剩下边框了。

测试三

如果你需要#div0也有一个高度 ，刚好能包裹着浮动的子元素，那么你可以给#div0也设置一个浮动，这样他们就又在同一个层面上了。

#div0 {

/* 设置背景色为黄色 */

background-color:yellow;

/* 设置边框为1px的线条 */

border:1px solid;

/* 左浮动 */

float:left;

}