css清除float方法

工作的忙碌，没时间总结如何处理清除网页float的经验。

昨天去面试了下，说到这问题，觉的很有必要总结下。

刚下火车，早上精力比较充沛。哈哈

方法一：使用空标签清除浮动：

css code:
<style type="text/css">
<!--
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,p{
  margin:0;
  padding:0
}
body{
  font: 400 12px/18px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color:#666;
}
#layout{
  background:#F3F5F9;
}
#l_block{
  background:#ccc;
  width:300px;
  height:200px;
  float:left;
}
#r_block{
  background:#f00;
  width:100px;
  height:100px;
  float:right;
}
.c_f{
  clear:both;
}
-->
</style>

html code:
<div id="layout">
  <div id="l_block">left block content</div>
  <div id="r_block">right block content</div>
  <div class="c_f">This is a content area</div> <!--clear float-->
</div>

方法二：使用overflow属性；

css code:
<style type="text/css">
<!--
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,p{
  margin:0;
  padding:0
}
body{
  font: 400 12px/18px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color:#666;
}
#layout{
  overflow:auto;
  zoom:1; /*ie6*/
  background:#F3F5F9;
}
#l_block{
  background:#ccc;
  width:300px;
  height:200px;
  float:left;
}
#r_block{
  background:#f00;
  width:100px;
  height:100px;
  float:right;
}
-->
</style>

html code:
<div id="layout">
  <div id="l_block">left block content</div>
  <div id="r_block">right block content</div>
</div>

方法三：使用after伪对象清楚浮动。

css code：
<style type="text/css">
<!--
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,p{
  margin:0;
  padding:0
}
body{
  font: 400 12px/18px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color:#666;
}
#layout{
  background:#F3F5F9;
}
#layout:after{
  height:0;
  display:block;
  clear:both;
  content:"";
  visibility:hidden;
  }
#l_block{
  background:#ccc;
  width:300px;
  height:200px;
  float:left;
}
#r_block{
  background:#f00;
  width:100px;
  height:100px;
  float:right;
}
-->
</style>

html code：
<div id="layout">
  <div id="l_block">left block content</div>
  <div id="r_block">right block content</div>
</div>

start work：先总结这，还有待补充解释.