论坛

标题: overflow：hidden [打印本页]

作者: qufang558 时间: 2016-12-16 16:14
标题: overflow：hidden
overflow：hidden 的意思，没太了解，可以举个例子不，谢谢

作者: 潜意式 时间: 2016-12-17 18:08
这个有两个常用的，一个是溢出隐藏，直观理解就是：超出父集的宽度或者高度的内容会被隐藏。
另一个就是清除浮动，例如我们有两个div：
#box{
      width:500px;
      background:#000;
      height:500px;
}
#content {
      float:left;
      width:600px;
      height:600px;
      background:red;
}
   给box这个div加了一个overflow:hidden这个属性解决了这个问题。我们直到overflow:hidden这个属性的作用是隐藏溢出，给box加上这个属性后，我们的content 的宽高自动的被隐藏掉了。另外，我们再做一个试验，将box这个div的高度值删除后，我们发现，box的高度自动的被content 这个div的高度值给撑开了。
说到这里，我们再来理解一下“浮动”这个词的含义。
我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当content 这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了box这个div，也就是说，此时的content 的宽高是多少，对于已经脱离了的box来说，都是不起作用的。

作者: qufang558 时间: 2016-12-19 13:14
我知道父级没有高度，就会被子集撑开，但子集如果加了浮动，父集的高度就撑不开了，为什么加了overflow:hidden高度又回来了，是什么原理呢？

作者: 潜意式 时间: 2016-12-19 19:20
overflow：hidden的意思是超出部分去掉，如果父元素height为auto，内部元素浮动，势必会将内部元素全部隐藏，故计算出内部浮动高度顺便清除浮动。

欢迎光临论坛 (http://bbs.qinxue.com/)