关键字：清除浮动 clear overflow :after伪类 zoom css样式
搞清楚各种类型的浮动和清除浮动的方法是每个研究css的前端页面工程师的必修课，它出现的情况很多很复杂，很值得我们去好好的研究一番，下面总结一些常用的清除浮动的方法。
为什么要清除浮动，让我们就记住一句话：浮动和html标记一样，都是需要闭合的。我们所有清除浮动的目的都是为了让其闭合。
1.首先介绍我最喜欢用的方法，用的样式主要有overflow/:after/zoom
====overflow====
这个属性支持FF、OP、IE7，只要添加了overflow:auto或者其他的hidden，浮动就被清除了。css如下：
div.container {
overflow:auto;
}
但是这会出现一个问题，那就是如果容器是定了高度的话，那么使用auto或者hidden会出现表现的问题。所以对于有高度的容器我们使用下面:after伪类的方法。
====:after====
现代浏览器都支持:after伪类，所以我们可以用这个伪类给需要清除浮动的标记的后面添加一个清除浮动的元素。css如下：
.container:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
====zoom====
好了，现在FF、OP等现代浏览器都Ok了，如果此时IE还没有完成，那我们再给IE加上它的私有属性zoom：1或者也可以使用*height:1%。这样IE也OK了。
div.container {
zoom:1;
}
综上所述：
zoom+overflow组合：代码简单，但是针对于有固定高度的容器可能会出现表现上的问题。
div.container {
zoom:1;
overflow:auto;
}
zoom+:after组合：能够适应所有情况，只是代码多了几行。
div.container {
zoom:1;
}
.container:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
选用哪种方法就看你自己的选择了。
2.第二种方法思路很简单，就是添加一个专门用来清理浮动的标记。标记可以是div/span/br等等什么都好，只要给它加上clear:both。最好是选择一些有意义的内容来闭合，尽量减少空的标记。
.clearfix{clear:both}
<div class=”container “>
<div class=”floatLeft”>floatLeft</div>
<div class=”floatRight”>floatRight</div>
<div class=”clear”>这里可以是foot，也可以是more，最好有内容</div>
</div>
3.第三种方法是这样的，如果子容器浮动时，它的父容器也同样浮动，那么，父容器会自动扩展，以包含子容器。也就是说在父容器也是浮动元素的时候，子容器可以不清除浮动。
div.container {float:left;}
<div class=”container”>
<div class=”floatLeft”>floatLeft</div>
<div class=”floatRight”>floatRight</div>
</div>
当然在使用这种方法的时候你要注意父容器的父容器哦～～呵呵！这个只是保证了子容器不用清除浮动，那么当父容器也浮动起来的时候，它本身的浮动又需要你的谨慎思考去清除了。
猫嗔 Css code Css code
最新评论