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

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

html:

<div class="cont">
    <div class="cont1"></div>
    <div class="cont2"></div>
    <div class="cont3">你好,我是Mrxia</div>
</div>

css:

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clear{
    clear:both;        
}
.cont{
         border:1px solid #ddfe00;width:800px;
}
.cont1{
    width:200px;height:100px;background:#ffce80;float:left;
}
.cont2{
    width:200px;height:100px;background:#ccc;float:right;
}

 效果图如下所示：

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

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

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

.cont{
     height:102px;                   
}

 2.使用css的clear属性

<div class="cont">
    <div class="cont1"></div>
    <div class="cont2"></div>
    <div class="clear">你好,我是Mrxia</div>
</div>

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

.cont{
     overflow:auto;
}

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

<div class="cont clearfix">
    <div class="cont1"></div>
    <div class="cont2"></div>
    <div>你好,我是Mrxia</div>
</div>

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

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

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

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