以下内容会分为如下小节：

　　1：overflow简介

　　1.1：visible

　　1.2：hidden

　　1.3：scroll

　　1.4：auto

　　1.5：inherit

　　2：overflow与absolute的关系

　　3：overflow与absolute的应用

　　4：解决方法之对比

　　1来简单的认识一下overflow属性。

　　overflow属性规定内容溢出元素框时发生的事情，也就是说，这个属性定义溢出元素内容区的内容会如何处理。所有主流浏览器都支持 overflow 属性，但是任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。听李文华老师说，其他css属性对inherit的支持也不是很好。所以我学了那么久没有一次用过inherit属性，基本上可以视而不见了。overflow含有以下属性值：visible/hidden/scroll/auto/inherit。跟大家交单介绍一下。

　　visible：默认值，内容不会被修剪，会呈现在元素框之外。

　　hidden：内容会被修剪，并且其余内容是不可见的。也就是说，当子元素的内容区域大于父元素的宽高的时候，子元素的超出部分会被剪裁，不显示被剪裁内容。

　　scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。不管内容是否大于或小于父容器宽度，都会出现滚动条。

　　auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

　　也就是说，如果水平方向略小于父容器宽度(滚动条在Chrome/Firefox/IE edge会占据17px的宽度)，而锤子方向大于父容器的宽度，那么只有垂直方向才会出现滚动条。

　　如果垂直方向略小于父容器宽度(原因同上)，而水平方向大于父容器的宽度，那么只有水平方向才会出现滚动条。

　　2

　　众所周知，当父元素没有设置高度，高度随内容撑开，子元素浮动的情况下，父元素的高度会发生塌陷。

　　想要清除内部浮动的方法有两种。之前float的分享中就已经介绍过，再说一次吧。第一就是在父容器底部插入空div。css部分就用到了overflow属性。第二就是为父元素设置一个伪元素after。使用了clear属性。这种方法经常被用于清除内部元素浮动导致的父元素高度塌陷的现象。

　　子元素设置了absolute，会突破父元素overflow的限制，既不会被剪裁，也不会在内部添加滚动条，按照原来的尺寸显示。也就是说，不管是设置了hidden还是auto，都没有用，子元素都会突破父元素的限制。而且在设置了scroll的情况下，子元素虽然在父元素内部，但是滚动条失效。

　　那应该如何处理absolute的嚣张气焰呢?有如下两种方法。

　　提示：父元素宽高400px。子元素宽高500px。

学习更多java知识关注微信公众号 HOME十二 了解更多