当前位置: 代码迷 >> HTML/CSS >> css扫除float方法
  详细解决方案

css扫除float方法

热度:354   发布时间:2012-10-17 10:25:46.0
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:先总结这,还有待补充解释.

  相关解决方案