清楚浮动的方法探索

标签：

当使用浮动float时，如果父div没有使用float，而子div使用了float，则可能出现以下情况：

是的，本来应该被撑开的父div却没有被撑开，这很尴尬。

那么应该如何处理这个浮动问题呢？

1.最简单的做法：设置父类高度。

将父类的div设置为固定高度，但是如果子类的高度大于父类高度之后，经runjs测试后父类的高度会随子类的高度变化。

2.入门级做法：clear：both;

在父类div后面加一个空的div，属性设置为clear：both;(清除左右上下的浮动)

这是以前运用很广的一种方法。

3.现象级做法：利用伪类：after结合2中方法+zoom完成。

html如下：

<div class="father">
    <div class="child">
    </div>
    <div class="child">
    </div>
</div>

css如下：

.father{
    border:1px solid #fff;
    
}
.child{
    width:100px;
    height:20px;
    border:1px solid red;
    float:left;
}
.father:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0;
}
.father{
    zoom:1;
}

此类方法与2中类似，但是兼容性更好，浏览器支持更好，而且不会出现过多的div造成页面的混乱。

这只是一类清楚浮动的思路，还有几类方法但是这里先介绍这一条思路

清楚浮动的方法探索

标签：

原文地址：http://www.cnblogs.com/wukall/p/5697415.html