这一节,我们要讲float也就是浮动了,浮动CSS是非常非常重要的概念。大部分常见的页面排版布局都是要靠他实现。

还有float的意思是浮动,而不是移动。大家思考下,这两个词,到底有什么区别?所谓的浮动,有一个字,表示它是漂浮到文档上面来了,它真正的术语叫做脱离文档流

先来看一个基本的代码。

<html>
<head>
    <meta charset="utf-8">

    <style>
        #parent {
            background-color: yellow;
            width: 800px;
            border:1px solid;
        }

        #child1, #child2 {
            width: 300px;
            height: 300px;
        }

        #child1 {
            background-color: darkgrey;
        }

        #child2 {
            background-color: #1f99b0;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
</body>
</html>

一个叫做parentdiv,包住了两个小div。分别给它们设置了一点基础样式。最下面黄色的就是parent了。左侧的两个分别是child1child2

float浮动

实验1,一个子元素浮动

现在就可以来试试浮动,到底是怎么回事。给第一个子元素,也就是灰色的child1,右浮动。

#child1 {
    /* ... */

    float: right;
}

这时候,刷新会发现。灰色的div到右侧去了,并且父元素的高度,变成了之前的一半。关于这个现象,我们用实物来演示一下。

float浮动

浮动之前,有两个div在父元素里面。两个子元素div,自己都要占据一整行,它们是上下排列的。父元素只设置了宽,并没有设置高,而两个子元素,是设置了高的。父元素parent所看到的高,是由两个子元素撑起来的。它的高度,就等于两个子div的高度之和。

现在让灰色的子元素右浮动后,它会脱离文档流,来到文档的上方。和原来的parantchild2不在同一个层面上了。也就说parent父元素里面,现在只有一个child2了。那父元素高度,其实就等同于,现在还在同一层面上child2的高度。

这就是浮动的基础概念了,大家一定要清楚它是浮起来了,并不只是简单的移动。

实验2,所有子元素都浮动

这次,我们给上面代码的基础上,给child2也加一个右浮动

#child2 {
    /* ... */

    float: right;
}

现在大家先猜一下会发生什么变化?发现我们的黄色的父元素居然不见了,顶部出现了一条线。这又是咋回事呢?

两个元素右浮动

好,大家还是来看实物演示。刚才灰色的子元素先右浮动了,父元素里,只剩下一个蓝绿色的子元素,所以高度坍塌为一半。这时候如果蓝绿色的子元素也右浮动起来了,那大家想想,父元素里,还有东西吗?

现在它里面根本没有任何东西了,这就导致它的高度完全坍塌掉,我们能看到的父元素,就只剩上下边框的这两根线条了。

最后大家还需要注意下顺序问题。刚开始是灰色在上面的,它先右浮动后,会到父元素最右边。蓝绿色的也右浮动,因为最右边已经有东西存在了。所以它会在灰色div的左边。

思考一个问题

如下代码,会呈现怎样的布局?

<html>
<head>
    <meta charset="utf-8">

    <style>
        #parent {
            background-color: yellow;
            width: 800px;
            border:1px solid;
        }

        #child1, #child2 {
            width: 300px;
            height: 300px;
        }

        #child1 {
            background-color: darkgrey;
            float: left;
        }

        #child2 {
            background-color: #1f99b0;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
</body>
</html>

float会盖在另一元素上

发现灰色的div直接把蓝绿色的div盖住了。你是否理解这是为什么?