清除浮动的几种方式

plaodj

不清除浮动会怎样？
（1）：背景不能显示
（2）：边框不能撑开
（3）：margin 设置值不能正确显示
（4）：下方内容往上移盖住浮动区域的内容
html代码：
[mw_shl_code=html,true]<div class="container">    <div class="fl"></div>    <div class="fr"></div></div><style>
    .fl{float:left;}
    .fr{float:right;}</style>[/mw_shl_code]

方式一：
在.container下，最后再加一个div如下：
[mw_shl_code=html,true]<div style="clear: both;height: 0; line-height: 0; font-size: 0"></div>[/mw_shl_code]

方式二：
给父元素.container添加样式：
[mw_shl_code=css,true].container{
    overflow: auto;
    zoom: 1;
}[/mw_shl_code]

方式三：
伪类清除浮动：after:
[mw_shl_code=css,true].container:after{
    content:'';
    display: block;
    clear: both;
    height:0;
    width:100%;
    visibility: hidden;
}.container{　　zoom:1;//为了兼容IE}[/mw_shl_code]


方法四：
双伪类清除浮动：
[mw_shl_code=css,true].container:before,.container:after {
    content: "";
    display: block;
    clear: both;
}.container{
    zoom: 1;
}[/mw_shl_code]

方式五：
展现为表格，需设置宽度：
[mw_shl_code=css,true].container{
    width:100%;
    display:table;
}[/mw_shl_code]

方式六：
展现为内联块状，需设置宽度：
[mw_shl_code=css,true].container{
    width:100%;
    display:inline-block;
}[/mw_shl_code]

方式七：
超出隐藏，不推荐使用
[mw_shl_code=css,true].container{
    overflow:hidden;
}[/mw_shl_code]

方式八：
给父元素定义高度，不推荐使用
[mw_shl_code=css,true].container{
    height:50px;
}[/mw_shl_code]