清除浮动有哪些方式

创建一个BFC

根据BFC的规则计算BFC的高度时，浮动元素也参与计算, 父级元素设置为overflow：hidden

 <style>
        .left {
            height: 100px;
            width: 100px;
            float: left;
            background-color: blueviolet;
        }

        .right {
            float: left;
            height: 200px;
            width: 200px;
            background-color: brown;
        }
    </style>
 <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
    </div>

clear:both

就拿上面的代码来说，不清除浮动的话会导致父元素的高度塌陷。 可以在父元素的最后一个子元素加上clear：both

 <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
       <div  style="clear:both></div>
    </div>

伪类元素（::after,::before）

   .clearfix::after{
            content: '';
            display: block;
            clear: both;

        }