Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

研究下overflow:hidden中所谓overflow的概念

  “overflow:hidden”字面意思就是“溢出:隐藏”。或者说“隐藏溢出的部分”,这很好理解。但是有一个非常不清晰的概念,“溢出”。什么是溢出?那当然是内容溢出容器了。可是就算了解到这里还是有很多概念上的问题。容器和内容都有许多布局方式可以使用,这些因素如果都考虑上去,这个“隐藏溢出的部分”就有点复杂了。所以我们要讨论的就是这个“溢出”的定义。
  如果容器的大小是固定的,当内容多的让容器放不下的时候就会“溢出”。这是最标准的溢出,就像往杯子里倒水,满了以后继续倒当然会溢出。那么容器没满会有溢出的情况吗?当然会!如果在容器内使用绝对定位(本文不讨论固定定位)的元素,再把位置定到容器之外那也是溢出。这就像在杯子里倒入氢气一样,一倒就飞走了,杯子里装不下那种东西。这就是为什么实验室制取氢气要用排水法收集的原因。其实比起“溢出”这种情况称为“逸出”更恰当。这两个情况都很容易理解,毕竟容器是固定了大小的,可以用实物来做比较。
  除了容器大小固定的情况之外,还有容器大小不固定的情况。容器大小不固定,一般指的是高度不固定。宽度不固定的话根据不同的布局会有很多不同的情况。先来看一个例子:
<style>
.parent {width:200px;border:1px solid red;}
.panel {border:1px solid green;}
.content {width:300px;border:1px solid blue;}
</style>
<div class="parent">
  <div class="panel">
    <div class="content">&nbsp;</div>
  </div>
</div>

  panel是容器,content是容器的内容,parent是容器的父级元素。现在它们都是普通的定位方式,当内容的宽度很大时,内容会溢出容器,但是容器的宽度最多也只会被撑到父级元素的宽度。而奇葩的IE6有个与众不同的计算方式。在IE6下,具有hasLayout属性的元素永远都会被非绝对定位后代元素撑开。上面的例子中,虽然panel没有hasLayout,但是parent因为设置了宽度,触发了hasLayout。content是parent的后代元素,所以parent会被content撑开。而parent被撑开了以后,由于panel是自适应父元素宽度的,所以panel也因为parent被撑开而变大了。总之,IE6的漏洞一大堆,现在也说不完这个,先无视IE6吧。接着试试容器float的情况。把上面例子中的CSS部分改成 .parent {width:200px;border:1px solid red;}
.panel {border:1px solid green;float:left;}
.content {width:300px;border:1px solid blue;}

  上面是IE7和Chrome,因为在IE7上float触发hasLayout而让panel具有了清除浮动的效果。这个问题可以参考以前的文章“float布局的几个常见问题解决”。除了这个问题之外就没什么区别了,panel被content撑开了而已。也就是说,没有设置宽度的浮动容器可以被非绝对定位的元素撑开。不信你可以试试让内容也同时浮动,一样可以撑开。接着是内容浮动,容器不浮动的情况,把CSS改成下面这样测试 .parent {width:200px;border:1px solid red;}
.panel {border:1px solid green;}
.content {width:300px;border:1px solid blue;float:left;}

  这种情况没有元素被撑开。其实这种情况就是很普通的浮动布局,因为没有撑开,所以我们布局的时候会采用“清除浮动”的手法强制撑开它。但是这里要说的重点不是“清除浮动”,而是容器没有被撑开这个事实。
  前面这几种情况我一直在说宽度,那么高度呢?当然不同,要是相同我就不会说“不固定大小,一般是指高度不固定了”。横向撑开容器时,容器会受到父元素的宽度约束。而纵向没有这个约束。 .parent {border:1px solid red;width:200px;height:50px;}
.panel {border:1px solid green;}
.content {;border:1px solid blue;width:300px;height:100px;}

  还有最后一种情况。之前的几个定义中我总是说“除了绝对定位的元素”。最后一种情况就是绝对定位的元素,这个情况很简单,我就不贴代码了。只要是绝对定位的元素就一定不会撑开容器。
  好像我说的东西有点偏题了,但是这是非常重要的,只有了解了什么情况不会撑开容器才能知道什么时候会产生“溢出”。知道了以上这些之后,所有不会撑开容器的情况,都会算作是“溢出”。
  “溢出”这个玩意儿,还不是这么简单的,今天就先说这些吧,明天接着说这个“溢出”。
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^