1. 什么是浮动

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

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

2. 例子

下面我们看例子

<html>
    <head>
        <style>
        #div0 {
            /* 设置背景色为黄色 */
            background-color:yellow;

            /* 设置边框为1px的线条 */
            border:1px solid;

            /* 设置宽度为800px */
            width:800px;
        }
        #div1, #div2 {
            /* 设置宽度为300px */
            width:300px;

            /* 设置高度为300px */
            height:300px;

            /* 设置边框为1px的线条 */
            border:1px solid;
        }
        #div1 {
            /* 设置背景色为灰色 */
            background-color:#888;
        }
        #div2 {
            /* 设置背景色为蓝色 */
            background-color:#08c;
        }
        </style>
    </head>
    <body>
        <div id="div0">
            <div id="div1"></div>
            <div id="div2"></div>
        </div>
    </body>
</html>

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

image.png

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

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


测试 1

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

#div1 {
    /* 设置背景色为灰色 */
    background-color:#888;

    /* 右浮动 */
    float:right;
}

image.png

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

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

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

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


测试 2

我们再给#div2做个左浮动

#div2 {
    /* 设置背景色为蓝色 */
    background-color:#08c;

    /* 左浮动 */
    float:left;
}

image.png

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

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

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


测试 3

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

#div0 {
    /* 设置背景色为黄色 */
    background-color:yellow;

    /* 设置边框为1px的线条 */
    border:1px solid;

    /* 左浮动 */
    float:left;
}

image.png

已添加到喜欢了