如何“清除浮动”

清除浮动(Enclosing float): clear:left | right | both | none;

闭合浮动(Clearing float):使浮动元素闭合

目的是解决父盒子高度为0的问题。

方法一:额外标签法  

<div class="wrap" id="float1">
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    <div style="clear:both;">我是额外的标签,用来闭合浮动哒</div>
 </div>

方法二:使用 br标签和其自身的 html属性

<div class="wrap" id="float2">
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    <br clear="all">
</div>

方法三:父元素设置overflow: hidden

<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
</div>

方法四:父元素设置display:table

<div class="wrap" id="float6" style="display:table;">
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
</div>

方法五:伪元素(我们采纳)

.clearfix:after {
    content:””;
    visibility:hidden; 
    display:block;
    height:0;
    clear:both;
}

.clearfix{
    Zoom:1;
}

方法六: 双伪元素(我们采纳)

.clearfix:before,.clearfix:after{
    display: table;
    content: "";
}

.clearfix:after {
    clear: both; /* For IE 6/7 (trigger hasLayout) */
}

.clearfix {
    zoom: 1;
}

 参考地址:那些年我们一起清除过的浮动

 

posted @ 2017-01-31 18:56  米琪儿  阅读(167)  评论(0编辑  收藏  举报