overflow:hidden

最新推荐文章于 2022-04-06 21:56:59 发布

转载最新推荐文章于 2022-04-06 21:56:59 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

HTML5+CSS|CSS3 专栏收录该内容

159 篇文章

订阅专栏

本文深入解析CSS中overflow:hidden属性的多种用途，包括隐藏溢出内容、清除浮动避免页面塌陷、解决外边距塌陷及图片底部留白问题。通过实际代码示例，展示如何在不同场景下应用此属性。

一. `overflow:hidden` 溢出隐藏

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

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

/*html*/
<div style="">
    今天天气很好！<br>今天天气很好！<br>
    今天天气很好！<br>今天天气很好！<br>
</div>

效果如下：
在这里插入图片描述
一般情况下，在页面中，一般溢出后会显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。

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

效果如下：
在这里插入图片描述

二. `overflow:hidden` 清除浮动

一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。那么问题来了，如下：
在这里插入图片描述如上，由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。如下：

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

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

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

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

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

关于`overflow:hidden`

关于overflow:hidden;很多人都知道他是溢出隐藏的一个属性，但是并不是很多人知道它的一些神奇的地方！首先先讲一下众所周知的溢出隐藏吧！

溢出隐藏

一般会遇到的情况是内容超出了父级盒子，如下：
在这里插入图片描述
使用overflow:hidden;之后，显示就是这样的：

哪里超出就隐藏哪里！一般会用在一行文本超出固定宽度就隐藏超出的内容，但是这种情况一般会和省略号一起配合使用，超出位置显示省略号（是一行文本才有效哦）：

.box {
    width: 200px;
    height: 50px;
    margin: 200px auto;
    background: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

<div class="box"> 我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本 </div>

使用这种方式的话，盒子一定要是块级盒子，并且有宽度哦！

以上只是说了它本身溢出隐藏的功能，那么接下来说一下它奇特的一些功能！

overflow:hidden;清除浮动

布局的时候肯定会有一种情况，在一个父级盒子中，有左右浮动的两个子级盒子，也就是常见的左右布局，但是子级的内容不定，会多也会少，这个时候父级就不能给一定的高度，而是根据子级的内容的多少来改变，如果不给高度，那么页面就会有塌陷的问题，什么是父级塌陷的问题呢？我们先来了解一下！

首先下面这个是父级（红色的盒子）给了一定的高度，并且左右两个子级浮动，显示布局是没有问题的，
在这里插入图片描述

但是现在我们想的是，right里面的内容增加，那么父级盒子应该一起增高，并且将footer部分顶下去，那么就不给红色父级高度，让父级自适应，这个问题大家一般会想到删除高度，但是问题就来了：

相信很多人在写页面的时候都会遇到这个类似的问题，那这个问题就是父级塌陷了！我们可以看到红色的父级不再显示，然而footer部分跑到了红色盒子的两个子级的下面去了。可以这么通俗的去理解：两个子级因为浮动的关系，脱离了标准流，但是父级没有给高度，父级就认为它没有任何内容，所以高度就不会被内容撑开，相当于父级的高度是0px;那么跟他平级的盒子footer,就会按照标准流的排布，紧挨着平级的红色盒子排着下来，只是红色的盒子高为0而已。这个就造成了页面的塌陷！那么这个是时候就要靠overflow：hidden;发挥它的作用了！我们先加上它看看什么效果：
在这里插入图片描述

这种情况是完全没有给父级加高度，只是加了一个overflow:hidden;如果这个时候我们同样不给浮动的右盒子高度，让它靠自己的内容撑开，就想列表新闻一样，列表多了，盒子就大了，那么红色的父级也会跟着增高的