css --- > 清除浮动

有时我们需要用到浮动,但又不想由于浮动的某些特性影响布局,这时就需要清除浮动

清除浮动主要应用的是CSS中的clear属性,clear属性定义了元素的哪一侧不允许出现浮动元素.

下面是两种应用比较广泛的清除浮动的方法:

// 在需要的地方添加定义了clear:both的空标签
<style>
html body div.clear,
html body span.clear
{
    background: none;
    border: 0;
    clear: both;                        /* 这句是重点, 其他都是兼容性代码 */
    display: block;
    float: none;
    font-size: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
/* 在需要清除浮动的元素后面添加 <div class="clear"> </div> 即可 */
           

上面是一个"万能"的清除浮动代码,可以在不同的浏览器下兼容

// 对父元素使用:after伪类
.clearfix:after {
    content: "020";
    display: bloack;
    height: 0;
    clear: both;
}
.clearfix {
     zoom: 1;
 }
 .left {
     float: left;
 }
 .right {
     float: right;
 }

<div class= "div1 clearfix">
    <div class="left">Left</div>
    <div class="right>Right</div>
</div>
/* 使用调试工具可以看到,父元素的高度不再为0了 */
           

参考 《CSS高效开发实战》P21