CSS---清除浮动

总结了几点用于清除浮动的方法:

1、对父级设置适合CSS高度

一般设置高度需要能确定内容高度才能设置。

2、clear:both清除浮动
为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此div引入“class="clear"”样式。这样即可清除浮动。

3、父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

4、建立清除浮动的类并应用在包含浮动的父级元素上

.clearfix:after{
content:'';
display:block;
height:0;
overflow:hidden;
clear:both;    
}
.clearfix{
 *zoom:1;  /*针对IE     
}    

改进版:

.clearfix:after{
 content:'';
display:table;
clear:both;       
}
.clearfix{
*zoom:1;
}

 

<div id="div1" class="clearfix">
  <div id="div11">div11</div>
  <div id="div12">div12</div>
  <div id="div13">div13</div>
</div>
<div id="div2" class="clearfix">
  <div id="div21">div21</div>
  <div id="div22">div22</div>
  <div id="div23">div23</div>
</div>

 

 

注:clearfix应该应用在包含浮动元素的父级元素上。  

posted @ 2015-06-09 10:53  框框A  阅读(379)  评论(0编辑  收藏  举报