overflow作用
作用:溢出隐藏,可以用来解决浮动导致的高度塌陷问题与浏览器的一个外边距塌陷bug
overflow:hidden 解决外边距塌陷
问题描述:在一个块级元素内部还有一个块级元素时,给里面的块级元素设置margin-top时,会在外面那个块级元素外面生效
<div class="box"><table class="inner"><tr><td>1</td><td>2</td><td>3</td></tr></table></div><style>.box{width: 150px;height: 150px;background-color: red;overflow: hidden;}.inner{width: 100px;height: 100px;background-color: yellow;margin-top: 20px;}</style>
解决后:
overflow:hidden 清除浮动
问题描述:float导致的高度塌陷
/*css样式*/
<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>/*html*/
<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;
overflow:hidden 溢出隐藏
给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！