【原创】html页面清除浮动的几种方法

首先，来个demo，代码如下：

html:

1 <div class="cont">
2     <div class="cont1"></div>
3     <div class="cont2"></div>
4     <div class="cont3">你好,我是Mrxia</div>
5 </div>
View Code

css:

 1 .clearfix:after {
 2     visibility: hidden;
 3     display: block;
 4     font-size: 0;
 5     content: " ";
 6     clear: both;
 7     height: 0;
 8 }
 9 .clear{
10     clear:both;        
11 }
12 .cont{
13          border:1px solid #ddfe00;width:800px;
14 }
15 .cont1{
16     width:200px;height:100px;background:#ffce80;float:left;
17 }
18 .cont2{
19     width:200px;height:100px;background:#ccc;float:right;
20 }
View Code

 效果图如下所示：

由于浮动的原因，父级元素cont不能被撑开，div.cont3与div.con1、div.cont2保持在了同一行。

清除浮动，常用方式有以下几种：

1.设置父元素的高度（局限性）

1 .cont{
2      height:102px;                   
3 }

 2.使用css的clear属性

1 <div class="cont">
2     <div class="cont1"></div>
3     <div class="cont2"></div>
4     <div class="clear">你好,我是Mrxia</div>
5 </div>

 3.设置父元素overflow属性（hidden/auto）

.cont{
     overflow:auto;
}

 4.使用clearfix（原理还是css的clear属性）

1 <div class="cont clearfix">
2     <div class="cont1"></div>
3     <div class="cont2"></div>
4     <div>你好,我是Mrxia</div>
5 </div>

 

clearfix说明：目的是创建一个隐形的内容为空的块来为目标元素清除浮动。

 

清除浮动后效果，如下图所示：

 

以上方法经笔者亲测可用，也是一点总结，欢迎大家多提看法、评论。

 

本文为原创，转载请注明出处！

posted @ 2014-02-28 15:58  Mrxia  阅读(5764)  评论(0)  编辑  收藏  举报