overflow属性设置当元素的内容溢出其区域时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。而hidden正相反,会自动剪切多出的内容。
外包含框高度为0,那么它应该剪切所有的内容,即不显示任何内容。但是实验的结果却相反,这不得不让人思考其他问题:为什么呢?
考虑这个问题,我们应该从浏览器的解析机制开始,首先,浏览器遵循从上到下,从内到外的顺序来解析HTML结构,然后再解析这些结构的css样式。
而css属性的解析也是有顺序的,一般会遵循先主后次的顺序,也就是说overflow属性晚于其他属性进行解析,当浏览器解析完父级的样式时,它会按着一定的逻辑不断进行计算。当解析overflow属性,它要完成几个计算问题:第一,元素本身是否定义了高度,第二,元素的布局模式,第三,包含子元素的大小。如果当元素没有明确定义高度的情况下,而布局又是以流动布局显示,此时它会考虑子元素的高度。也就是会所,此时overflow:hidden声明触发了浏览器重新计算包含框的高度的可能性,此时它会考虑到子元素的高度,并努力包含子元素,避免子元素被裁切显示。因此,会看到了使用overflow:hidden声明之后,包含框能够自适应包含内部的子元素。