清除浮动

首先，我们创建两个盒子，添加浮动做到左边一个右边一个，然后在top之后增加一个bottom块

<head>
    <style>
      .box1{
           float: left;
            100px;
           height: 100px;
           background-color: tomato;
       }
       .box2{
           float: right;
            100px;
           height: 100px;
           background-color: yellow;
       }
       .bottom{
           height: 50px;
           background-color: springgreen;
       }
    </style>
</head>
<body>
    <div class="top">
        <div class="box1">11111</div>
        <div class="box2">22222</div>

    </div> 
    <div class="bottom"></div> 
</body>

效果图

可以看到bottom到了顶部，而不是top的下面，此时的top高度为0；这是因为有浮动的关系，所以需要清除浮动。

方法1：设置top的高度和内层元素高度一致

.top{
            height: 100px;
            background-color: thistle;
        }

方法2：overflow: hidden;父级的高度就随子级容器及子级内容的高度而自适应

.top{
            overflow: hidden;
            background-color: thistle;
        }

效果图

方法3：在top里在添加最后一个块级子元素，设置clear: both;两边都不允许有浮动对象

<head>
    <style>
      .box1{
           float: left;
            100px;
           height: 100px;
           background-color: tomato;
       }
       .box2{
           float: right;
            100px;
           height: 100px;
           background-color: yellow;
       }
       .box3{
            clear: both;
        }
       .bottom{
           height: 50px;
           background-color: springgreen;
       }
    </style>
</head>
<body>
    <div class="top">
        <div class="box1 box">11111</div>
        <div class="box2 box">22222</div>
        <div class="box3"></div>
    </div>
    <div class="bottom"></div>
</body>

方法3延伸：运用伪元素，用top::after代替box3，zoom: 1是针对旧版本的

.top::after{
            content: "";
            display: block;
            clear: both;
            zoom: 1;
        }

整合一下上面的代码，可以单独提出一个用于清除浮动的类clearfix

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
            zoom: 1;
        }

        .box1 {
            float: left;
             100px;
            height: 100px;
            background-color: tomato;
        }

        .box2 {
            float: right;
             100px;
            height: 100px;
            background-color: yellow;
        }
        .bottom{
           height: 50px;
           background-color: springgreen;
       }

    </style>
</head>

<body>
    <div class="top clearfix" >
        <div class="box1">11111</div>
        <div class="box2">22222</div>
    </div>
    <div class="bottom"></div>
</body>

</html>

效果图：