css之清除浮动

methods:

详情参照:http://www.jb51.net/css/173023.html

1、给父级一个高度。

2、给腹肌一个overflow:hidden;

3、给父级一个overflow:auto;

4、引入公共类,再加入div:.clearfloat{clear:both}

<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div> 

5、引入公共类:

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1} 

推荐使用。

原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题

优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)

缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。

建议:推荐使用,建议定义公共类,以减少CSS代码。 

兼容IE6、IE7、IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:
触发IE浏览器的haslayout
解决ie下的浮动,margin重叠等一些问题。 

zoom属性参照:http://www.jb51.net/css/40285.html

原文地址:https://www.cnblogs.com/lingshenghao/p/7461280.html