CSS清除浮动的方法

用例子来说明下：

这个是未清除浮动的源代码，注意到父级元素box没有展开。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>清除浮动的方法</title>
    <style>
        .box{
            width:600px;
            border:1px red solid;
        }
        .left{
            float:left;
            width:100px;
            height:100px;
            border:1px blue solid;
        }
        .right{
            float:right;
            width:100px;
            height:100px;
            border:1px blue solid;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

效果图
效果

为了使父级元素展开，有三种方法：

第一：设置父级元素的高度;

这个例子里，内部的高度是100px,加上上下边框，总共是102px;只需要给父级设置下高度102px。

只增加了一行代码了

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>清除浮动的方法之增加父级高度</title>
    <style>
        .box{
            width:600px;
            height:102px;
            border:1px red solid;
        }
        .left{
            float:left;
            width:100px;
            height:100px;
            border:1px blue solid;
        }
        .right{
            float:right;
            width:100px;
            height:100px;
            border:1px blue solid;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

效果图
效果

第二：添加clear:both;

增加了clear,

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>清除浮动的方法之使用clear:both;</title>
    <style>
        .box{
            width:600px;
            height:102px;
            border:1px red solid;
        }
        .left{
            float:left;
            width:100px;
            height:100px;
            border:1px blue solid;
        }
        .right{
            float:right;
            width:100px;
            height:100px;
            border:1px blue solid;
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

第三：添加overflow:hidden;

给父级添加overflow:hidden;

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>清除浮动的方法之使用overflow:hidden;</title>
    <style>
        .box{
            width:600px;
            border:1px red solid;
            overflow:hidden;
        }
        .left{
            float:left;
            width:100px;
            height:100px;
            border:1px blue solid;
        }
        .right{
            float:right;
            width:100px;
            height:100px;
            border:1px blue solid;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>