标签：log 边框 block 隐藏 container float attr width font
不清除浮动会怎样？
（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; }
标签：log 边框 block 隐藏 container float attr width font
原文地址：http://www.cnblogs.com/ombre/p/7389069.html
