清除浮动的几种方式

不清除浮动会怎样？
（1）：背景不能显示
（2）：边框不能撑开
（3）：margin 设置值不能正确显示
（4）：下方内容往上移盖住浮动区域的内容

html代码：<div class="container">
<div class="fl"></div>
<div class="fr"></div>
</div>
<style>
.fl{float:left;}
.fr{float:right;}
</style>方式一：
在.container下，最后再加一个div如下：

<div style="clear: both;height: 0; line-height: 0; font-size: 0"></div>

方式二：
给父元素.container添加样式：

.container{
overflow: auto;
zoom: 1;
}

方式三：
伪类清除浮动：after:

.container:after{
content:'';
display: block;
clear: both;
height:0;
width:100%;
visibility: hidden;
}
.container{　　zoom:1;//为了兼容IE}

方法四：
双伪类清除浮动：

.container:before,.container:after {
content: "";
display: block;
clear: both;
}
.container{
zoom: 1;
}

方式五：
展现为表格，需设置宽度：

.container{
width:100%;
display:table;
}

方式六：
展现为内联块状，需设置宽度：

.container{
width:100%;
display:inline-block;
}

方式七：
超出隐藏，不推荐使用

.container{
overflow:hidden;
}

方式八：
给父元素定义高度，不推荐使用

.container{
height:50px;
}