实例解析清除CSSfloat浮动的三种方法

本文向大家描述一下清除CSS float浮动的方法，主要包括使用空标签清除浮动，使用overflow属性，使用after伪对象清除浮动三种，希望本文介绍对你有所帮助。

商城网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联2013年开创至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

清除浮动的三种方法

先看一下下面代码：

viewsourceprint?

 
 
 
 
    
  
  
  
  
  1. 01 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. 07  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. 08 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. 09  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. 10
  10. 首页
    11.    
  
  
  
  11.  
    12.   
  
  
  
  12. 11  
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14. 12
  15. 我的日志
    16.    
  
  
  
  16.  
    17.   
  
  
  
  17. 13  
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19. 14
  20. 我的相册
    21.    
  
  
  
  21.  
    22.   
  
  
  
  22. 15  
    23.   
  
  
  
  23.  
    24.   
  
  
  
  24. 16
  25. 我的心情
    26.    
  
  
  
  26.  
    27.   
  
  
  
  27. 17  
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29. 18
  30. 个人中心
    31.    
  
  
  
  31.  
    32.   
  
  
  
  32. 19  
    33.   
  
  
  
  33.  
    34.   
  
  
  
  34. 20 
    35.   
  
  
  
  35.  
    36.   
  
  
  
  36. 21  
    37.   
  
  
  
  37.  
    38.   
  
  
  
  38. 22
    这里不是导航的内容
     
    39.   
  
  
  
  39.  
    40.

 页面显示如下：

如何解决以上问题呢？唯一的办法就是清除浮动。#p#

清除浮动的方法

◆使用空标签清除浮动

在需要清楚浮动的层里边添加：

或者

viewsourceprint?

 
 
 
 
    
  
  
  
  
  1. 1 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. 2
  4. 首页  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. 3
  7. 我的日志  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. 4
  10. 我的相册  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12. 5
  13. 我的心情  
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. 6
  16. 个人中心  
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18. 7 
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20. 8
    21.    
  
  
  
  21.  
    22.

 ◆使用overflow属性

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可!overflow:auto;是让高度自适应，zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决，注意，zoom不符合W3C标准。overflow:hidden也可以实现。

viewsourceprint?

 
 
 
 
    
  
  
  
  
  1. 1 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. 2
  4. 首页  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. 3
  7. 我的日志  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. 4
  10. 我的相册  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12. 5
  13. 我的心情  
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. 6
  16. 个人中心  
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18. 7
    19.    
  
  
  
  19.  
    20.

 ◆使用after伪对象清除浮动

after伪对象非IE浏览器支持，所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。

一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；

二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为"."，但我发现为空亦是可以的。

viewsourceprint?

 
 
 
 
    
  
  
  
  
  1. 1ul.nav:after{display:block;clear:both;content:"";  
    2.   
  
  
  
  2. visibility:hidden;height:0;}  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.

◆清除浮动后效果如下：

使用一下代码清除浮动，屡试不爽。

viewsourceprint?

 
 
 
 
    
  
  
  
  
  1. 1.clearfix:after{content:".";display:block;height:0;
    2.   
  
  
  
  2. clear:both;visibility:hidden;}  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. 2.clearfix{display:inline-block;}  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. 3.clearfix{display:block;}  
    7.   
  
  
  
  7.  
    8.

网页题目：实例解析清除CSSfloat浮动的三种方法
地址分享：http://www.csdahua.cn/qtweb/news11/128061.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

网站收录知识

分类信息网

成都手机网站建设　　 　南宁旺客科技　　 　营山产后护理　　 　成都网站制作公司　　 　江油网站建设　　 　温岭熙道网站　　 　网站seo优化　　 　域名申请　　 　平城网站运维　　 　营销推广　　 　艾名斯线缆　　 　青羊雕琢时光　　 　成都网站设计　　 　网站报价方案　　 　定制网站　　 　响应式报价　　 　绵阳电信机房　　 　成都二枢机房　　 　四川绵阳主机托管　　 　全网营销推广