首页 > 教程 > 关键词  > 清除最新资讯  > 正文

清除浮动的方法

2009-05-27 09:05 · 稿源：twinsenliang.net

在CSS森林(30247792)群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动，嘿嘿，这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。

方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。

引用CSS代码

以下为引用的内容：

  1. ul{
  2. list-style:none;
  3. height:auto;
  4. margin:0;
  5. padding:0;
  6. background-color:#436973;
  7. }
  8. li{
  9. float:left;
  10. width:80px;
  11. height:80px;
  12. background-color:#83B1DF;
  13. }
  14. .demo{
  15. clear:both;
  16. border:1px solid #FF00FF;
  17. margin-bottom:5px;
  18. }
  19. .overflow{
  20. overflow:auto;
  21. zoom:1;
  22. background-color:#43FF73;
  23. }

引用HTML代码

以下为引用的内容：

  1. <div class="demo">
  2. <ul class="overflow">
  3. <li>1</li>
  4. <li>2</li>
  5. <li>3</li>
  6. <li>4</li>
  7. <li>5</li>
  8. <li>6</li>
  9. <li>7</li>
  10. <li>8</li>
  11. <li>9</li>
  12. </ul>
  13. </div>
  14. <div class="demo">
  15. <ul>
  16. <li>1</li>
  17. <li>2</li>
  18. <li>3</li>
  19. <li>4</li>
  20. <li>5</li>
  21. <li>6</li>
  22. <li>7</li>
  23. <li>8</li>
  24. <li>9</li>
  25. </ul>
  26. </div>

其中zoom是为了IE6准备的。

完整的Demo

注：忘了一个很重要的内容，并不是所有的overflow属性都可起来一样的效果，比如visible属性就只能对IE起作用。例子可以看这里Demo2

这样的话就有一个问题啦，如果要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案：对于IE6及以下版本的IE，可以直接定义高度;对于IE7、FF、OP，可定义min-height。

引用CSS代码

以下为引用的内容：

  1. .overflow{
  2. height:auto;
  3. _height:200px;
  4. min-height:200px;
  5. overflow:auto;
  6. zoom:1;
  7. _overflow:visible;
  8. }

转自鬼仔的Blog，他写的时候用的是最简单，测试后觉得是最优秀的，因为不会有其余的非语义的编码。

本文经已更新后续技术，请关注:https://chinaz.com/Design/Pages/052MIQ2009.html

（举报）

  • 相关推荐
关键词：

  • 入选联合国案例集！AI拯救濒危动物，飞桨助力清除1.3万余条非法贸易广告

    7月9日，百度飞桨"濒危物种AI守护官"项目入选联合国AI向善全球峰会创新案例集。该项目通过AI技术识别野生动物制品图片，截至2025年6月已推动删除超1.3万条非法贸易广告。这是百度与国际爱护动物基金会(IFAW)合作研发的2.0版本，基于飞桨深度学习平台，识别准确率达86%，覆盖34类濒危物种及其制品。项目曾获2025爱迪生最佳新产品奖银奖。全球非法野生动物贸易年交易额高达230亿美元，该项目通过AI技术显著提升了网络野生动物犯罪识别效率，已筛查超41万张可疑图片，精准识别3.3万幅目标图片。AI向善全球峰会由国际电信联盟和瑞士政府共同主办，是推动AI技术发展与应用的重要平台。

  • 硬盘丢失了数据怎么恢复?硬盘数据恢复的6种方法

    文章分析了硬盘数据丢失的常见原因及恢复方法。数据丢失主要源于人为误操作、硬件故障、软件系统问题和环境因素四类。针对不同情况，介绍了6种恢复方法：回收站还原、系统版本回退、备份还原、Mac系统的TimeMachine、命令行操作以及专业数据恢复软件。其中专业软件如转转大师能深度扫描硬盘，支持多种文件格式恢复，操作简便且成功率高。文章强调数据丢失后应避免写入操作，根据实际情况选择合适恢复方式，并建议做好日常备份预防数据丢失。

  • 演员王楚然求助荨麻疹治疗方法：痒到崩溃 网友大呼感同身受

    据媒体报道，演员王楚然近日在粉丝群求助荨麻疹治疗方法，并晒出面部红斑照片。她透露自己长期受过敏困扰，经医院检测仍未能明确过敏原，剧烈运动和情绪波动时易反复发作。看完她分享关于荨麻疹反复的症状，不少网友表示深有共鸣，纷纷留言晒出自己的经历。 据悉，荨麻疹常见诱因包括食物、药物、感染、物理刺激、情绪紧张等。有时候，诱因是多个叠加的，比如

    ​荨麻疹 ​过敏反应 ​皮肤病

  • 动态域名解析全攻略:从原理到实用方法详解

    本文介绍了动态域名解析(DDNS)技术及其应用。DDNS通过将动态变化的公网IP地址与固定域名绑定，解决了远程访问动态IP设备的难题。文章详细解析了三种实用方法：1)使用专业DDNS服务商；2)利用路由器内置功能；3)安装专用软件如花生壳。重点推荐了花生壳软件，其支持多系统、智能DNS解析和端口映射等功能，拥有1800万用户。使用DDNS需注意选择可靠服务商、正确配置记录、定期检查更新等事项。动态域名解析技术极大便利了远程访问需求，而花生壳凭借强大功能成为理想选择。

    ​动态域名解析 ​远程访问 ​个人服务器搭建

  • CSS教程：清除浮动的方法大全

    早段时间特别的忙，忙到站点一直没有更新；但是这段时间也是偷偷的做了一些的工作，比如对站点的JS进行了压缩，构思labs分站以及聚合分站。

    ​CSS教程 ​清除浮动

  • 清除浮动新说

    IE6 和 IE7 都不支持 :after 这个伪类，因此需要后面两条来触发IE6/7的haslayout，以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。

    ​清除浮动 ​新说

  • 除甲醛最有效方法，墙面顶面窗帘有甲醛吗怎样清除

    其中复合板是利用废旧的木材或废旧的复合板打成木屑再用胶水和高温压合在一起，废旧的材料里本身会含有甲醛，而胶水里也含有甲醛，因此复合板吊顶是存在甲醛污染的...窗帘也同样含有甲醛，因为窗帘是用棉、麻、化纤等材料制成的，为了保证窗帘的平整度，厂家在制作窗帘的过程中会添加粘胶剂，在印染的时候会添加一些含有甲醛成分的染料...了解了墙面、顶面和窗帘所含甲醛的缘由之后，我们一起来研究下，该如何对墙面、顶面和窗帘进行对症下药，从源头持久分解甲醛、长效净化异味......

    ​窗帘 ​木材

  • 《辐射4》清除屋内骨头方法辐射4避难所骨头清除技巧

    辐射4房屋建造系统非常的完善，但是由于末日模式下死人尸骨会在屋内出现，不少强迫症患者会非常介意，小编为大家提供《辐射4》清除屋内骨头方法，清除以后不会再出来，这个避难所骨头清除技巧大家可以借鉴一下。

    ​辐射4避难所骨头 ​辐射4避难所屋内骨头 ​辐射4骨头清除方法

  • 冬天怎么去除甲醛 房间装修清除甲醛的方法

    冬季是甲醛挥发释放的高峰期，很多人不能理解，甲醛不是高温的夏天才会挥发吗？冬天这么冷，甲醛为何会是释放的高峰期，因为冬季，天气寒冷，我们的室内门窗时常紧闭，室内的空调或者地暖以及取暖器，长时间运作，室内的空气温度真的是一点也不冷，反而更加高温，空气不流通，随着室内温度的升高，无法和室外空气流动，达不到降低甲醛的要求，故而，所有释放的甲醛，此刻，正大范围覆盖室内空气，间接影响我们的健康。随着甲醛中毒

    ​除甲醛

  • 保卫萝卜3手游怎么快速清除道具 快速清除道具方法

    保卫萝卜3官网：　　保卫萝卜3手游中怎么快速清楚道具？快速清除道具有什么技巧？今天安趣小哥就来给大家详细介绍一下快速清除道具的技巧！　　1、保卫萝卜3每一关开始之前或者是怪物进攻之前都会给相应的时间来清理道具。　　2、在怪物攻击的空隙进行清除。　　3、玩家可以利用群攻进行消除。　　以上就是安趣小编给大家带来的全部内容了，要想了解更多游戏资讯，游戏攻略，游戏视频等尽在安趣网《保卫萝卜3》手游专区，安趣小哥期待小伙伴的到来！

    ​保卫萝卜3怎么快速清除道具

热文

  • 3 天
  • 7天

站长商机

广告

商务合作 侵权投诉 广告服务 版权声明 招聘

©CopyRight 2002-2020 CHINAZ.COM