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

全面阐述overflow:hidden属性

2008-08-17 12:30 · 稿源:Chinaz用户投稿

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。

一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢?我们下面来详细的阐述一下。

<div id="wai">
 <div id="nei"></div>
</div>

这是一个常用的div写法,下面我们来书写样式。大家可以在DMX中自己做试验

#wai{ width:500px;  background:#000; height:500px;}

#nei { float:left; width:600px; height:600px; background:red;}

可以看到,我给nei这个id加了一个浮动,我们常规的理解是,我们允许nei这个id的div的右边出现其他的内容,只要它的宽度不超过wai这个div和nei这个div的剩余值。

如果div wai中还包含其他的div,我不允许它出现在nei的右侧,我们则用样式clear:both指定这个div,不允许它浮动在nei右侧。

这些在ie6里面是正确的。但是在火狐或者其他浏览器里面,我们发现问题并非如此简单。我们发现,当nei这个div的宽度和高度都大于wai这个div的时候,wai并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中,都是500。

这个时候我不理解了,我搜索了很多的资料,但是都没能理解这是为什么,直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。

我们直到overflow:hidden这个属性的作用是隐藏溢出,给wai加上这个属性后,我们的nei的宽高自动的被隐藏掉了。另外,我们再做一个试验,将wai这个div的高度值删除后,我们发现,wai的高度自动的被nei这个div的高度值给撑开了。

说到这里,我们再来理解一下“浮动”这个词的含义。我们原先的理解是,在一个平面上的浮动,但是通过这个试验,我们发现,这不仅仅是一个平面上的浮动,而是一个立体的浮动!

也就是说,当nei这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了wai这个div,也就是说,此时的nei的宽高是多少,对于已经脱离了的wai来说,都是不起作用的。打个形象的比喻就是当JJ脱离BB的时候,JJ的大小对于BB是没有撑开的作用的(有点少儿不宜的感觉-_-|||)

OK,当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给wai这个div加上overflow:hidden这个属性的时候,其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除了,就好比JJ又进入了BB内,JJ的大小自然又会影响到BB的大小。

这就是overflow:hidden这个属性清除浮动的准确含义。

当我们没有给wai这个div设置高度的时候,nei这个div的高度,就会撑开wai这个div,而在另一个方面,我们要注意到的是,当我们给wai这个div加上一个高度值,那么无论nei这个div的高度是多少,wai这个高度都是我们设定的值。而当nei的高度超过wai的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!

我相信,通过我的这些文字,大家对overflow:hidden这个属性有了全新的认识。希望大家和我一样,在div+css学习中能够不断的进步!

(PS:本人是div+css的初学者,请高手不要嘲笑。困惑这个属性已经很久,网上的资料大多不怎么理想,因此才写这些文字献丑。本文为地方网络工作室原创。转载请保留本工作室链接,文章首发:http://www.difangla.com/Html/jishu/css/88140.html)

  • 相关推荐
  • 大家在看
  • SpaceX拟建浮动太空港,可支持超音速全球旅

    美国太空探索技术公司(SpaceX)计划开始建造“浮动太空港”,其建造目标是为超重型运载火箭提供发射场进行发射和回收,这一工程不仅支持向月球、火星发射火箭,还可展开超音速全球“点对点”旅行。

  • 马斯克:SpaceX计划建浮动太空港 未来支持超音速全球旅行

    6月19日消息,据国外媒体报道,美国太空探索技术公司SpaceX正计划建造一个浮动太空港(floating, superheavy-class spaceports)。SpaceX外媒发现,SpaceX正在招募相关工程师,并公布了这一发现。SpaceX创始人埃隆?马斯克在社交网络上回应称,SpaceX正计划建造浮动太空港,可为其超重型运载火箭提供发射场地,进行发射和回收,未来不但支持向月球、火星发射火箭,还可以支持超音速环球旅行。太空港具体地点目前还未敲?

  • “DiDi说泵”推广价格预估,靠谱的自媒体推广平台

    备注:本文数据来自站长之家移动传媒平台,文章涉及的数据依托平台大数据计算所得,非百度官方数据,仅供参考。DiDi说泵是当前百家号中的普通号,目前账号百家号权重为0,综合排名位列1049940名,社会分类排名位列139040名,领先了6.0%的百家号。 DiDi说泵百家号概况 DiDi说泵的简介为八年工业泵实战经验帮你水泵选型!,是一家主旨明确、领域专注的自媒体作者,截止目前为止他们已经在百家号上发布了超过0篇的游戏内容,最近该作?

  • 十万以下买什么车好?CS35PLUS不容错过

    对于大多数年轻人来说,购车预算往往在十万左右,而这一级别市场也成为竞争最激烈的细分市场。各家车企面对激烈的竞争,为了吸引消费者的关注,更是推出众多产品来抢占市场。不过也正是因为如此,很多消费者都纠结十万以下买什么车好?而作为国产车企中的老大哥,长安汽车旗下的CS35PLUS无疑是“十万以下买什么车好”的代表之一。初看长安CS35PLUS,你会觉得这款车与市场上其他同级产品有着很大不同。在长安CS35 PLUS身上,虽然也能看到一丝

  • StrategyAnalytics:超宽带芯片正在迈向成功

    Strategy Analytics最新发布的研究报告《UWB的回归:智能手机、汽车、工业等芯片预测》指出,2019年UWB(超宽带)系统和无线电芯片市场实现了飞跃;于此同时,新标准、芯片和应用意味着UWB的复兴。相关资料显示,UWB 技术是一种传输速率高,发射功率较低,穿透能力较强并且是基于极窄脉冲的无线技术。 StrategyAnalytics指出,苹果iPhone11机型采用了全新的U1超宽带无线电芯片以及用于远程无钥匙进入的新汽车标准推动?

  • 跨境收款别担心,有亚马逊全球收款(ACCS)就够了

    收款,可以说是跨境电商卖家业务全流程中最重要的环节。跨境电商业务中的选品、采购、仓储、物流、营销等环节都需要依托于稳定的资金链来进行,而收款的高效安全稳定是卖家回笼货款并用于下一流程业务开展的关键。近期某国外支付平台破产暴雷,卖家辛辛苦苦销售货品所得的货款无法拿到手,没有比这更糟心的事了。要想做好跨境电商业务,选择一个稳定安全的收款渠道也是一门必修课。今天就给大家介绍一下近来市场上炒得火热的亚马逊官方?

  • Serverless架构的前世今生

    一、Serverless简介云计算的不断发展,涌现出很多改变传统IT架构和运维方式的新技术,而以虚拟机、容器、微服务为代表的技术更是在各个层面不断提升云服务的技术能力,它们将应用和环境中很多通用能力变成了一种服务。但无论这些技术应用在哪里,帮助企业“降本增效”是技术变革永恒的主题。Serverless架构的出现,带来了跨越式的变革。Serverless下主机管理、操作系统管理、基础软件的部署运维、资源分配和扩缩容能力全部由云厂?

  • 完美世界协助警方抓获CSGO外挂“Killer”制售团伙

    近日,CS:GO官方发文称,国服自上线以来,一直对作弊现象采取零容忍态度,坚决打击任何破坏游戏公平性的行为。近日,完美世界联合警方,成功打掉一个CS:GO外挂跨省制售团伙,抓获犯罪嫌疑人3名,其涉案金额高达百余万元。

  • 和平精英SS8赛季手册寻宝行动全攻略 SS8赛季手册寻宝行动教程

    ​和平精英SS8赛季手册寻宝行动是新增的玩法,在其中可以获得非常多的奖励,但是一些玩家还不清楚怎么去玩寻宝行动,下面就来为大家分享一下和平精英SS8赛季手册寻宝行动全攻略。

  • 和平精英SS8赛季手册全部奖励汇总 SS8赛季手册皮肤奖励一览

    ​和平精英的SS8赛季手册马上就要上线了,很多玩家还不清楚此次S8的赛季手册有什么内容,所以今天就来为大家分享一下和平精英SS8赛季手册全部奖励汇总。

  • AMD/Intel/NVIDIA竞争惨烈:供应链懵了

    AMD、Intel、NVIDIA,作为CPU/GPU芯片行业的三大上游巨头,一举一动都对整个产业有着巨大的影响,而现在,似乎整个产业链都被三家的产品发布节奏给整懵了。产业链人士认为,三家巨头的新品发布

  • 沫子直播100个CSGO开箱,“脸太黑”差一点想卸载游戏

    斗玩网原创:不少喜欢看绝地求生直播的观众应该都会知道沫子这个妹子主播,她有着“绝地求生一姐”称号,不仅颜值不错,性格也十分好,更是通过自己出色的吃鸡技术赢得了大量玩家的关注。而最近沫子开始接触了CSGO这款游戏,不过在开箱环节却遭遇到了人生最“黑暗”时刻,甚至要气到打算卸载了游戏。

  • 美瑞时(MRISSTIME)发展历程

    美瑞时(MRISSTIME)是世界著名制表品牌之一,隶属于瑞士瑞时集团,瑞士瑞时集团创立于1978年,总部位于洛桑。集团旗下围绕世界名品钟表收藏及高雅格调文化生活方式交流的全球瑞时会俱乐部100余家,服务于全球近500万VIP客户。自19世纪中叶,Ammann家族开始从事钟表制造及收藏,拥有独立的制表企业及顶级腕表收藏艺术廊、钟表博物馆。Ammann家族所坚持的理念,为品牌开创独树一帜的视野,并留下经典隽永的传世作品。直到今天,美瑞时(MRISSTIM

  • LG Display已被韩国选定为可伸缩显示屏研发领导厂商

    6月12日消息,据国外媒体报道,LG旗下专注于面板事务的LG Display,已被韩国选定为可伸缩显示屏研发的领导厂商。LG Display被韩国选定为可伸缩显示屏研发的领导厂商的消息,是LG Display在官网宣布的。官网的信息显示,LG Display已被韩国产业通商资源部(MOTIE),选定为可伸缩显示屏研发这一国家项目的领导厂商。LG Display在官网上表示,他们会监督这一大型研发项目的进展,可伸缩显示屏研发项目,是韩国产业通商资源

  • RTX 3080系列显卡泄密严重 NVIDIA开始调查了

    虽然5月份的GTC 2020演讲中,NVIDIA已经正式发布了7nm工艺的安培GPU,但首发的A100是面向数据中心市场的,安培游戏卡的还是个谜。最近一周RTX 3000系列显卡的爆料很多,NVIDIA已经开始调查代工厂

  • 世纪互联蓝云获得红帽CCSP认证,携手助力企业数字化转型

    中国北京- 2020 年 6 月 3 日,上海蓝云网络科技有限公司(以下简称世纪互联蓝云),正式宣布加入红帽云计算及服务供应商认证(Red Hat Certified Cloud and Service Provider,CCSP)计划,让其客户和独立软件供应商(ISV)对使用红帽解决方案构建下一代IT项目充满信心。作为红帽云计算及服务供应商,世纪互联蓝云将整合平台资源,为用户提供自动化的购买及交付流程。无论是企业用户,还是渠道伙伴都可以通过世纪互联蓝云的线上自助系统

  • 女神异闻录4黄金版全boss攻略汇总 P4G全boss战详细攻略

    女神异闻录4黄金版中boss的数量还是非常多的,一些boss等级和人格面具等级没达到的话就会很难打,下面就来为大家分享一下女神异闻录4黄金版全boss攻略汇总。

  • 显示行业年度盛会——DIC EXPO显示展招展进入倒计时

    所有的成绩,都是实力的最好背书;所有品质,也需要用成绩来佐证。由权威协会中国光学光电子行业协会液晶分会CODA唯一主办 2020 中国(上海)国际显示技术及应用创新展(简称DIC EXPO显示展)凭借自身的专业、权威、高品质、高规格、大规模,成为全球显示行业年度盛会,自进入公众视野以来关注度始终居高不下,吸引了显示产业链上的企业争相加入,现展位即将售罄。作为疫后全球显示展会的先锋,DIC EXPO显示展将于 7 月22- 24 日上

  • AMD将改写10年来DIY市场历史:份额逼近30% 大厂全齐了

    AMD去年7月推出的7nm锐龙3000处理器一直卖的不错,下个月应该会推出改良版的锐龙3000XT系列处理器,有望再添一把火。AMD在DIY市场上稳步推进,有可能改写10年来的历史,市场份额逼近30%。根据

  • 耶鲁智能锁与Yale Access完美组合 让生活事半功倍

    在对于生活质量与要求越来越高的年代,耶鲁这个拥有 180 年悠久历史的品牌,创新推出yaleaccessapp。通过该app,可以绑定家庭中的耶鲁智能设备,轻松管理耶鲁智能锁,让生活事半功倍。 YaleAccess可以做什么? 从功能上看,YaleAccess连结起了耶鲁旗下的智能门锁、智能家居门铃、智能闭路电视、电子猫眼等各类产品,用互联网与高科技构建起家庭安防牢不可破的保卫圈。 YaleAccess可以实时推送信息,将家中智能锁的开锁信息传递到

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议

热文

  • 3 天
  • 7天