清除浮动有哪些方式？比较好的方式是哪一种？

高度塌陷

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱

margin塌陷

指的是嵌套父子块级元素垂直方向（次方向）的margin会结合到一起，并取最大的值。

---

 block formatting context即块级格式化上下文。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系。它会让盒模型的渲染规则发生改变，并且创建一个新的环境并与外界相隔。

如何启动BFC

1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不为visible

清除浮动

1.找到浮动元素的父元素，设置overflow:hidden,不过溢出不可见

<style>
    img{
        width:50px;
        border:1px solid #8e8e8e;
        float:left;
    }
</style>
<div style="overflow:hidden">
    <img src="images/search.jpg"/>
    <img src="images/tel.jpg"/>
    <img src="images/weixin.png"/>
    <img src="images/nav_left.jpg"/>
</div>

2.在所有浮动元素的下方添加一个空标签，设置clear:both，这种方式增加了不必要标签，不常用

<style>
    img{
        width:50px;
        border:1px solid #8e8e8e;
        float:left;
    }
</style>
<div style="overflow:hidden">
    <img src="images/search.jpg"/>
    <img src="images/tel.jpg"/>
    <img src="images/weixin.png"/>
    <div style="clear:both"></div>
</div>

3.（推荐）原理类似于第二种方式，不过是用伪类选择器，在父元素后面添加了一个clear:both的属性。主流都是这样用。。。

<style>
    .clearfix:after{
        content:'';
        display:block;
        clear:both;
    }
    .clearfix{//兼容低版本IE
        zoom:1;
    }
</style>
<div class="clearfix">
    <img src="images/search.jpg"/>
    <img src="images/tel.jpg"/>
    <img src="images/weixin.png"/>
    <img src="images/nav_left.jpg"/>
    <!-- <div style="clear:both;"></div> -->
</div>