前言

清除浮动主要是为了解决，当父元素未设置高度，子元素使用了浮动(浮动元素会脱离标准流,不占位)，引起的内部高度为0，从而影响后续父同级标准流盒子布局的问题。

演示代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
</head>
<style>
    .head {
        width: 600px;
        margin: 0 auto;
        background-color: #FFCCCC;
    }

    .left {
        float: left;
        height: 300px;
        width: 200px;
        background-color: #FFFF99;
    }

    .right {
        float: right;
        height: 300px;
        width: 300px;
        background-color: #CCCCFF;
    }

    .box {
        height: 200px;
        width: 800px;
        margin: 0 auto;
        background-color: #CCCCCC;
    }
</style>
<body>
<div class="head">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="box"></div>
</body>
</html>

效果图

方法一：额外标签法

在父元素内容的最后添加一个块级元素
给添加的块级元素设置clear:both;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
</head>
<style>
    .head {
        width: 600px;
        margin: 0 auto;
        background-color: #FFCCCC;
    }

    .left {
        float: left;
        height: 300px;
        width: 200px;
        background-color: #FFFF99;
    }

    .right {
        float: right;
        height: 300px;
        width: 300px;
        background-color: #CCCCFF;
    }

    .box {
        height: 200px;
        width: 800px;
        margin: 0 auto;
        background-color: #CCCCCC;
    }

    .clearfix{
        clear: both;
    }
</style>
<body>
<div class="head">
    <div class="left"></div>
    <div class="right"></div>
    <!--清除新标签-->
    <div class="clearfix"></div>
</div>
<div class="box"></div>
</body>
</html>

方法二：单伪元素清除法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
</head>
<style>
    .head {
        width: 600px;
        margin: 0 auto;
        background-color: #FFCCCC;
    }

    .left {
        float: left;
        height: 300px;
        width: 200px;
        background-color: #FFFF99;
    }

    .right {
        float: right;
        height: 300px;
        width: 300px;
        background-color: #CCCCFF;
    }

    .box {
        height: 200px;
        width: 800px;
        margin: 0 auto;
        background-color: #CCCCCC;
    }

    /*使用伪元素代替了html中的额外标签*/
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }
</style>
<body>
<div class="head clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="box"></div>
</body>
</html>

方法三：双伪元素清除法(推荐)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
</head>
<style>
    .head {
        width: 600px;
        margin: 0 auto;
        background-color: #FFCCCC;
    }

    .left {
        float: left;
        height: 300px;
        width: 200px;
        background-color: #FFFF99;
    }

    .right {
        float: right;
        height: 300px;
        width: 300px;
        background-color: #CCCCFF;
    }

    .box {
        height: 200px;
        width: 800px;
        margin: 0 auto;
        background-color: #CCCCCC;
    }

    /*使用伪元素代替了html中的额外标签,clearfix::before解决外边距塌陷问题*/
    .clearfix::before, .clearfix::after {
        content: "";
        display: table;
    }

    .clearfix::after {
        clear: both;
    }
</style>
<body>
<div class="head clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="box"></div>
</body>
</html>

此方法小米，淘宝的官网等目前都依然采用

方法四：给父元素添加overflow: hidden；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
</head>
<style>
    .head {
        width: 600px;
        margin: 0 auto;
        background-color: #FFCCCC;
        overflow: hidden;
    }

    .left {
        float: left;
        height: 300px;
        width: 200px;
        background-color: #FFFF99;
    }

    .right {
        float: right;
        height: 300px;
        width: 300px;
        background-color: #CCCCFF;
    }

    .box {
        height: 200px;
        width: 800px;
        margin: 0 auto;
        background-color: #CCCCCC;
    }
</style>
<body>
<div class="head">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="box"></div>
</body>
</html>

最终效果