Question

给我详细讲解一下overflow:hidden的用法？

hidden是隐藏，到底怎么隐藏呢？是超出的部分被剪裁掉了？被谁裁掉了呢？什么情况下会用到overflow：hidden啊？求大神给我讲讲，有图示最好！感激不尽！

Answer 1

1. overflow:hidden这个CSS样式是大家常用到的CSS样式。一提到清除浮动，我们就会想到另外一个CSS样式:clear:both。下面详细的阐述一下“浮动”的含义。
   

2. 这是常用的div写法，下面我们来书写样式。大家可以在DMX中自己做试验
   #box{ :500px; background:#000; height:500px; }
   #content { float:left; width:600px; height:600px; background:red; }
   

3. 给box这个div加了一个overflow:hidden这个属性解决了这个问题。我们直到overflow:hidden这个属性的作用是隐藏溢出，给box加上这个属性后，我们的content 的宽高自动的被隐藏掉了。

4. 另外，我们再做一个试验，将box这个div的高度值删除后，我们发现，box的高度自动的被content 这个div的高度值给撑开了。
   

5. 说到这里，我们再来理解一下“浮动”这个词的含义。原先理解是在一个平面上的浮动，但是通过这个试验会发现这不仅仅是一个平面上的浮动，而是一个立体的浮动。当content 这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了box这个div，也就是说，此时的content 的宽高是多少，对于已经脱离了的box来说都不起作用。
   

6. 当我们给box这个div加上overflow:hidden这个属性时，其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden清除浮动的准确含义。
   

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