overflowhidden溢出隐藏

一. overflow:hidden  溢出隐藏
给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度，那么超出的部分将会被隐藏，不占据位置。

      效果如下*

 一般情况下，在页面中，一般溢出后会显示省略号，例如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。

 效果如下*

二. overflow:hidden  解决外边距塌陷
父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷，如下：

 效果如下*

 给父级元素添加overflow:hidden，就可以解决这个问题

 效果如下*

 三. overflow:hidden  清除浮动
一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。如下：

 效果如下*

如上，由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。如下：

 效果如下*

 

这篇好文章是转载于：学新通技术网