浮动里面有一个很重要的属性,叫做清除浮动。具体代码是这样的

<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: right;
        }

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

让两个子元素,全部右浮动。

清除浮动

#child2 {
    /* ... */

    clear: right;
}

child2里面加上,清除右边,刷新后,会发现两个div又变成上下排列了。这里的清除浮动,你可以理解成,就是说,child2的右边不能有东西,那它只好下来,到另外一行了。

清除浮动

这里的clear,可以设置成leftright或者bothboth就是同时包含左右两个方向。

恢复盒子高度

方案1: 父元素设置高度

当两个子div都浮动后,父元素的高度会坍塌掉。如果想恢复父元素的高度,有多种做法。第一个想到的方法,应该就是,直接给父元素设置高度。

#parent {
    /* ... */

    height: 600px;
}

恢复父元素高度

这是可以的,但是这样做,有一个严重的缺陷。如果子元素高度变了,父元素无法自动适应。

#child1, #child2 {
    /* ... */

    height: 200px;
}

高度清除浮动bug

方案2:父元素也浮动

将刚才的代码恢复到最初状态。大家都知道,之所以父元素高度没了,是因为子元素浮动起来了,大家不在一个层面了,父元素中没有东西了。那如果这时候,我们给父元素也来一个浮动呢?

#parent {
    /* ... */

    float: left;
}

刷新下,现在父元素也浮动起来了,它和子元素是不是又回到一个层面了呢?这样也是一种方案了,而且它的高度能自适应子元素的高度。但这种作法,缺点也很明显,做页面布局的时候,很多情况父元素是不能浮动的。

方案3:空白div,清除浮动

先到style里,定义一个class叫做clear的样式。然后到parent内部最下面,添加上这个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: right;
        }

        #child2 {
            background-color: #1f99b0;
            float: right;
            clear: both;
        }

        .clear {
            margin: 0;
            padding: 0;
            border: 0;
            clear: both;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>

    <div class="clear"></div>
</div>
</body>
</html>

这种做法是一个比较完美的解决方案。只需要在需要恢复高度的父元素里,加上这个clear就可以解决了。缺点就是要加一个空div

方案4:after清除浮动

目前最好的方法,会用到css 3里面生成内容。具体代码如下

<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: right;
        }

        #child2 {
            background-color: #1f99b0;
            float: right;
            clear: both;
        }

        .clear:after {
            display: block;
            content: "clear";
            height: 0;
            clear: both;
            overflow: hidden;
            visibility: hidden;
        }
    </style>
</head>
<body>
<div id="parent" class="clear">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
</body>
</html>

完美清除浮动

给之前叫clear样式,加上:after这个伪元素,里面放上这些代码。用的时候,只要给需要恢复高度的父元素,加上class="clear",就能真正完美的解决了。再也不需要放一个空div了。

其实大家使用检查工具,会显现了一个::after,其实这就相当于刚才上面说的第三种方法,在这里加了一个空div只是这个div,在html代码中看不见而已,但它是依然存在的。关于after的具体用法,我们到css 3的课程中再详细和大家介绍了。现在只需要知道怎样使用它恢复父元素高度就足够了。