一. overflow:hidden 溢出隐藏
overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等问题)
截图如下:
overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等问题)
一般情况下,在页面中,一般溢出后会显示省略号,比如,当一行文本超出固定宽度就隐藏超出的内容显示省略号。
overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等问题)
overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等问题)
二. overflow:hidden 清除浮动
一般而言,父级元素不设置高度时,高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后,子元素会脱离标准流,不占位,父级元素检测不到子元素的高度,父级元素高度为0。那么问题来了,如下:
overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等问题)
overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等问题)

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

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

所以为了让兼容性更好的话,如果需要使用overflow:hidden来清除浮动,那么最好加上zoom:1;
overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等问题)
overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等问题)
三. overflow:hidden 解决外边距塌陷
父级元素内部有子元素,如果给子元素添加margin-top样式,那么父级元素也会跟着下来,造成外边距塌陷,如下:
overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等问题)
overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等问题)
因此,给父级元素添加overflow:hidden,就可以解决这个问题了。
overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等问题)

overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等问题)

相关文章:

  • 2021-07-24
  • 2021-12-27
  • 2022-12-23
  • 2021-11-12
  • 2021-05-01
  • 2021-08-25
  • 2022-12-23
  • 2021-11-08
猜你喜欢
  • 2021-11-12
  • 2021-10-10
  • 2021-08-22
  • 2021-09-10
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案