⼀. overflow:hidden 溢出隐藏

给⼀个元素设置overflow: hidden，如果该元素中的内容超出了给定的宽度或⾼度，那么超出的部分将会被隐藏，不占位。

<style type="text/css">div {width: 150px;height: 60px;background: skyblue;overflow: hidden;  /*溢出隐藏*/}
</style>

<div>今天天⽓很好！<br />今天天⽓很好！<br />今天天⽓很好！<br />今天天⽓很好！<br />
</div>

效果如下：

⼆. overflow:hidden 清除浮动（页面塌陷）

⼀般⽽⾔，⽗级元素不设置⾼度时，⾼度随内容增加⾃适应⾼度。当⽗级元素内部的⼦元素全部都设置浮动float之后，⼦元素会脱离标准流，不占位，⽗级元素检测不到⼦元素的⾼度，⽗级元素⾼度为0。那么问题来了，如下：

<style type="text/css">.box{background:skyblue;}.kid{width: 100px;height: 100px;float:left;}.kid1{background: yellow;}.kid2{background: orange;}.wrap{width: 300px;height: 150px;background: blue;color: white;}
</style>

<body><div class="box"><div class="kid kid1">⼦元素1</div><div class="kid kid2">⼦元素2</div></div><div class="wrap">其他部分</div>
</body>

如上，由于⽗级元素没有⾼度，下⾯的元素会顶上去，造成页⾯的塌陷。因此，需要给⽗级加个overflow:hidden属性，这样⽗级的⾼度就随⼦级容器及⼦级内容的⾼度⽽⾃适应。如下：

由于在IE⽐较低版本的浏览器中使⽤overflow：hidden；是不能达到这样的效果，因此需要加上 zoom:1;
所以为了让兼容性更好的话，如果需要使⽤overflow:hidden来清除浮动，那么最好加上zoom:1;

<style type="text/css">.box{background:skyblue;overflow: hidden;  /*清除浮动*/zoom:1;}.kid{width: 100px;height: 100px;float:left;}.kid1{background: yellow;}.kid2{background: orange;}.wrap{width: 300px;height: 150px;background: blue;color: white;}
</style>

<body><div class="box"><div class="kid kid1">⼦元素1</div><div class="kid kid2">⼦元素2</div></div><div class="wrap">其他部分</div>
</body>

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

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

<style type="text/css">.box{background:skyblue;}.kid{width: 100px;height: 100px;background: yellow;margin-top: 20px;}
</style>

<body><div class="box"><div class="kid">⼦元素1</div></div>
</body>

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

<style type="text/css">.box{background:skyblue;overflow: hidden; /*解决外边距塌陷*/   }.kid{width: 100px;height: 100px;background: yellow;margin-top: 20px;}
</style>

<body><div class="box"><div class="kid">⼦元素1</div></div>
</body>

详解overflow：hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷）相关推荐

关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
一. overflow:hidden 溢出隐藏给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. /*css样式*/ ...
html清除溢出,深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章 ...
深入理解：overflow:hidden——溢出,坍塌,清除浮动
深入理解:overflow:hidden--溢出,坍塌,清除浮动 overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有 ...
meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧您的 ...
win7下计划任务schtasks使用详解及错误:无法加载列资源的解决方法1
win7下计划任务schtasks使用详解及"错误:无法加载列资源"的解决方法1 2011-12-10 20:33 schtasks 命令简述: 安排命令和程序,使其定期运行或在指 ...
无需SherlockActionbar的SlidingMenu使用详解（一）——通过SlidingMenu设置容器并解决滑动卡顿的问题
无需SherlockActionbar的SlidingMenu使用详解(一)--通过SlidingMenu设置容器并解决滑动卡顿的问题参考文章: (1)无需SherlockActionbar的Sli ...
linux直接运行程序加载动态库失败,扣丁学堂Linux培训详解程序运行时加载动态库失败解决方法...
今天扣丁学堂Linux培训老师给大家介绍一下关于Linux程序运行时加载动态库失败的解决方法,希望对同学们学习有所帮助,下面我们一起来看一下吧. Linux下不能加载动态库问题当出现下边异常情况 . ...
border-radius导致overflow:auto 或者 overflow:hidden失效，溢出问题解决方法
如图所示:如果一个父元素设置了overflow:hidden属于的同时还设置了border-radius属性,那么如果想隐藏超出的子元素,四个圆角处会出现超出圆角依然显示的bug: 解决办法: 只需在 ...
CSS系列之详解overflow
文章の目录 1.属性值构成 2.取值 3.示例 4.注意点 5.overflow-x 6.overflow-y 6.1.属性值 6.2.示例写在最后 overflow:内容溢出时的设置,可以设置对象 ...

详解overflow：hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷）

⼀. overflow:hidden 溢出隐藏

⼆. overflow:hidden 清除浮动（页面塌陷）

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

详解overflow：hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷）相关推荐

最新文章

热门文章