css 清楚浮动的4种办法

1、浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

                 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样

2、我们使用position：fixed，absolute和float都会造成浮动效果。

3、clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

方法1、额外标签clear：both；（额外标签，语义化差，不推荐）

方法2：父级元素  overflow: hidden;此方法通过触发BFC方式，实现清除浮动（不推荐）

方法3、：after clear：both；

方法4.使用before和after双伪元素清除浮动

        /* 方法1、额外标签clear：both */
        .clear {
            clear: both;
        }

        /* 方法2：父级元素  overflow: hidden; */
        .fahter {
            width: 400px;
            border: 1px solid deeppink;
            overflow: hidden;
        }

        /* 方法3、：after clear：both */
        .clearfix:after {
            /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
            /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }

　　　　 /* 方法4、：before和after双伪元素清除浮动 */

　　　　.clearfix:after,.clearfix:before{ 
　　　　　　content: ""; display: table; 
　　　　} 
　　　　.clearfix:after{ 
　　　　　　clear: both; 
　　　　} 
　　　　.clearfix{ 　　
　　　　　　*zoom: 1; 
　　　　}

    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>

　　参考链接：https://cloud.tencent.com/developer/article/1601589