重学前端-CSS篇4-清除浮动常用方式总结

HTML代码如下：

<div id="wrap">
    <div id="inner"></div>
</div>

CSS 清除浮动方案

（1）给浮动的父级元素加高度，缺点：浮动元素高度不确定的时候不适用

#wrap{
    border: 1px solid;
    height: 300px;
}
#inner{
    float: left;
    width: 200px;
    height: 200px;
    background: pink;
}

（2）开启BFC：让浮动的子元素库撑开父级的高度

#wrap{
    border: 1px solid;
    overflow: hidden; /*触发bfc*/
}
#inner{
    float: left;
    width: 200px;
    height: 200px;
    background: pink;
}

（3）br 标签清除浮动

<div id="wrap">
    <div id="inner"></div>
    <br clear="all" />
</div>

（4）空标签清除浮动

<div id="wrap">
    <div id="inner"></div>
    <div style="clear: both;"></div>
</div>

（5）伪元素 + 开启haslayout—终极解决方案

/*开启haslayout-兼容 IE6，7*/
.clearfix {
    *zoom: 1;
}

/* 万能清除法 after伪类 清浮动 -主流方法*/
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    height:0;
    overflow:hidden;
    visibility:hidden;
}