清除浮动常用的三种方式

1.给父元素设置固定宽高

这个方式比较简单，在此不做事例说明

2.在浮动的元素后面 添加空元素并设置clear: both;

    <style>
        .num1 {
            float: left;
            width: 100px;
            height: 20px;
            background: #ccc;
        }

        .num11 {
            float: right;
            width: 100px;
            height: 30px;
            background: rgb(158, 155, 155);
        }

        .num111 {
            height: 30px;
            border: 1px solid;
            clear: both;
        }
    
    </style>

    <div class="content">
          <div class="num1"></div>
          <div class="num11"></div>
          <div class="num111"></div>
    </div>

3.父元素没有高度，由内容撑开，清除子元素的浮动，给父元素添加overflow:hidden

    <style>
        .overflow{
            width: 100%;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        .num2 {
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid #aaa;
        }

        .num22 {
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid pink;
        }
    </style>

    <div class="overflow">
           <div class="num2"></div>
           <div class="num22"></div>
    </div>