CSS四大清除浮动方法

方法一：额外标签法（隔墙法）

在父亲盒子中新增一个盒子，并且在style标签中给新盒子写上"clear:both;"，即可。

  .clear {
            clear: both;
        } 

方法二：父级overflow:hidden

只需要在父亲盒子中加入一段代码"overflow: hidden;"，即可。
下面展示一些 `内联代码片`。

.box {
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

方法三：父级after伪元素（见代码）

.clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

方法四：父级双伪元素

.clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }