详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)IE8 css overflow:hidden不起作用css中overflow:hidden失效问题的解决方法深入理解CSS overflow:hidden——溢出,坍塌,清除浮动移动端设置了overflow:hidden页面还会滚动的禁止方法css中position:relative和overflow:hidden之间的问题解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容

一. overflow:hidden  溢出隐藏

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

 /*css样式*/  /*html*/ 
 今天天气很好！
今天天气很好！
 今天天气很好！
今天天气很好！

效果如下：

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

 /*只适用于单行文本*/ div{ width: 150px; background: skyblue; overflow: hidden; /*溢出隐藏*/ white-space: nowrap; /*规定文本不进行换行*/ text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（...）*/ }

效果如下：

二. overflow:hidden  清除浮动

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

 /*css样式*/  /*html*/ 
子元素1
子元素2
其他部分

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

由于在IE比较低版本的浏览器中使用overflow：hidden；是不能达到这样的效果，因此需要加上 zoom:1;

所以为了让兼容性更好的话，如果需要使用overflow:hidden来清除浮动，那么最好加上zoom:1;

 /*css样式*/  /*html*/ 
子元素1
子元素2
其他部分

三. overflow:hidden  解决外边距塌陷

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

 /*css样式*/  /*html*/ 
子元素1

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

 /*css样式*/  /*html*/ 
子元素1

到此这篇关于详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)的文章就介绍到这了,更多相关overflow:hidden的作用 内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！