码迷,mamicode.com
首页 > 其他好文 > 详细

关于overflow:hidden的作用(溢出隐藏,清除浮动,解决外边塌陷等等)

时间:2019-10-26 19:12:35      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:没有   浮动   over   解决   好的   info   因此   图片   内容   

1.overflow:hidden  溢出隐藏

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

       代码如下:

       技术图片

 

       运行结果如下:

      技术图片

 

 

2. overflow:hidden 清除浮动

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

        技术图片

 

       运行结果如下:

      技术图片

 

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

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

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

        技术图片

 

 

 3. overflow:hidden 解决外边塌陷

          父级元素内部有子元素,如果给子元素添加margin-top样式,那么父级元素也会跟着下来,造成外边距塌陷,如下:(红色框)

       技术图片

 

       给父元素增加overflow:hidden可以解决这个问题:

      技术图片

 

      运行结果如下:

     技术图片

 

关于overflow:hidden的作用(溢出隐藏,清除浮动,解决外边塌陷等等)

标签:没有   浮动   over   解决   好的   info   因此   图片   内容   

原文地址:https://www.cnblogs.com/xiaohaodeboke/p/11744122.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!