1：为毛要清除浮动？  

1）因为浮动会脱离标准流，导致父元素撑不开，会出现一条直线的奇怪模样；

解决方法

  　第1种方法 标签的伪元素   :: after   ::before{ contnet:" " ; clear:both ; display:block; }

     第2种方法可以给父元素 添加overflow: hidden;   

为什么overflow: hidden可以清除浮动呢?其实是我们添加overflow时创建了BFC(块级格式化上下文).
一个BFC可以被显示触发,只需满足一下条件之一:

1.float 的值不为 none;
2.overflow 的值不为 visible;
3.position 的值为 fixed/absolute;
4.display 的值为 table-cell/table-caption/inline-block/flex/inline-flex.
在计算BFC高度时,浮动元素高度也参与计算,因此div.container在计算高度时也把#div1的高度计算在内,因此会出现这种"清除浮动"的效果,把#div1包含在内.

-----什么是BFC模式

BFC(Block Fomatting Context)为块级格式化上下文的的简称。实质上可以理解为盒子内部一套自己的渲染规则，而这种渲染规则会影响着元素的定位以及与其兄弟元素之间的相互作用。一般当我们进行盒子布局的时候，形成BFC模式的盒子就会按自己的渲染规则布局和定位而不影响其他环境中的布局（常见的浮动元素脱离标准文档流，其内部子元素则按照其相应的渲染规则布局，而浮动元素之间则互不影响，其自身就像一个独立的容器）。
 
总结一下也就是说：如果一个元素符合了成为BFC模式的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器，拥有自己的渲染规则。（在 CSS3 中，BFC 叫做 Flow Root）

三、BFC模式应用场景

1.高度坍塌（容器塌陷）看以下情景 ：


 
子元素设置浮动父元素高度坍塌

可以看到父元素的高度为0，子元素浮动后不能撑开父元素的高度造成容器塌陷这时只需给父元素设置

overflow: hidden;
zoom:1;   /*兼容IE9以下*/
 
父元素高度被撑起

2.阻止外边距margin叠加
当两个块级元素margin做如下设置时 ：

.div1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-bottom: 100px;
            /*overflow: hidden;
            zoom:1;   兼容IE9以下*/
        }
.div2 {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
            margin-top: 50px;
            /*float: left*/
        }

marin会以大的为主，即实际两个div产生的margin只有100px，这时打开注释的代码，使其变为BFC模式你会发现margin不再折叠。

3.防止浮动元素遮住文档流中元素
当3列布局采用浮动的方法时难免会产生遮挡情况

.left {
            width: 200px;
            height: 800px;
            background-color: blue;     
            float: left;    
        }
        .right {
            width: 200px;
            height: 800px;
            background-color: green;
            float: right;
        }
        .center {
            width: 500px;
            height: 800px;
            background-color: #ff0000;
            /*overflow: hidden;*/           
        }

此时给中间元素设置overflow:hidden属性即可清除浮动。


链接：https://www.jianshu.com/p/790ba6cb7392
来源：简书

 第3种方法通过属性clear:both;达到清除浮动的目的；

　　元素浮动后，只需要在浮动元素添加多一个块级元素，并添加clear: both;属性，便可以达到清除浮动的目的。

总结公式

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

.clearfix{
*zoom:1;    /* IE/7/6*/
}