关于三种常用的清除浮动方法的优劣对比,请老师简单讲一讲

关于三种常用的清除浮动方法的优劣对比,请老师简单讲一讲

问题1.视频课程里讲到,清除浮动的方法推荐,大块的内容推荐使用CSS3:after,小块的内容推荐使用overflow:hidden,这样推荐的理由是什么呢?

问题2.为什么没有推荐空div法,它与其他两种相比,有什么优劣?


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,问题解答如下:

1.overflow:hidden还有一个作用就是超出隐藏。即一个盒子里面的内容溢出,溢出的内容就会被隐藏。大块的内容意思就是说一个盒子中内容比较多,里面的内容可能会超出,例如头部导航出现下拉菜单,下拉菜单肯定要超出父容器的,此时设置overflow:hidden就会把下拉菜单隐藏了。所以最好使用父级div定义伪类:after的方法。

而小块说的是内容比较少的,使用overflow:hidden比较简单。当然了,使用伪类的方式也可以。

2.这里老师给你说一下三种浮动的优缺点,参考如下:

(1)第一种 , 结尾处加空div标签clear:both

http://img1.sycdn.imooc.com//climg/5edda10109c44e5904530136.jpg

优点:简单,代码少,浏览器支持好

缺点:如果页面浮动布局多,就要增加很多空div ,会感觉很麻烦了

(2)第二种,父级div定义overflow:hidden

http://img1.sycdn.imooc.com//climg/5edda1270912b01704260138.jpg

优点:简单,代码少,浏览器支持好

缺点:因为此属性另一个作用是超出盒子区域的内容会被隐藏。不能和position配合使用,因为超出的尺寸的会被隐藏

(3)第三种 , 父级div定义伪类:after和zoom

http://img1.sycdn.imooc.com//climg/5edda13e09018b3d03950295.jpg

优点:浏览器支持好,不容易出现怪问题。

缺点:代码多,要两句代码结合使用,才能让主流浏览器都支持。

但是在实际开发中,第三种是应用比较多的。因为一个网站中会有很多需要清除浮动的地方。只要在css中定义一次,哪里需要清除浮动,哪里就使用clearfix这个类名即可,用起来比较方便。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师