overflow:hidden

深碍√TFBOYSˉ_ 2021-07-05 00:17 336阅读 0赞

## 一. `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>

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

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

效果如下：  
![在这里插入图片描述][20191106223933846.png]

## 二. `overflow:hidden` 清除浮动 ##

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

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

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

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

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

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

--------------------

## 关于`overflow:hidden` ##

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

**溢出隐藏**

一般会遇到的情况是内容超出了父级盒子，如下：  
![在这里插入图片描述][20191107135011914.png]  
使用`overflow:hidden;`之后，显示就是这样的：  
![在这里插入图片描述][20191107135022911.png]  
哪里超出就隐藏哪里！一般会用在一行文本超出固定宽度就隐藏超出的内容，但是这种情况一般会和省略号一起配合使用，超出位置显示省略号（是一行文本才有效哦）：

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

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

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

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

**`overflow:hidden;`清除浮动**

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

首先下面这个是父级（红色的盒子）给了一定的高度，并且左右两个子级浮动，显示布局是没有问题的，  
![在这里插入图片描述][20191107135229953.png]  
![在这里插入图片描述][20191107135221817.png]  
但是现在我们想的是，`right`里面的内容增加，那么父级盒子应该一起增高，并且将`footer`部分顶下去，那么就不给红色父级高度，让父级自适应，这个问题大家一般会想到删除高度，但是问题就来了：  
![在这里插入图片描述][20191107135243109.png]  
![在这里插入图片描述][20191107135250631.png]  
相信很多人在写页面的时候都会遇到这个类似的问题，那这个问题就是父级塌陷了！我们可以看到红色的父级不再显示，然而`footer`部分跑到了红色盒子的两个子级的下面去了。可以这么通俗的去理解：两个子级因为浮动的关系，脱离了标准流，但是父级没有给高度，父级就认为它没有任何内容，所以高度就不会被内容撑开，相当于父级的高度是`0px`;那么跟他平级的盒子`footer`,就会按照标准流的排布，紧挨着平级的红色盒子排着下来，只是红色的盒子高为`0`而已。这个就造成了页面的塌陷！那么这个是时候就要靠`overflow：hidden;`发挥它的作用了！我们先加上它看看什么效果：  
![在这里插入图片描述][20191107135307589.png]  
![在这里插入图片描述][20191107135315126.png]  
这种情况是完全没有给父级加高度，只是加了一个`overflow:hidden;`如果这个时候我们同样不给浮动的右盒子高度，让它靠自己的内容撑开，就想列表新闻一样，列表多了，盒子就大了，那么红色的父级也会跟着增高的

假设`right`内容有点少  
![在这里插入图片描述][20191107135355426.png]  
现在增加`right`  
![在这里插入图片描述][20191107135359911.png]  
现在可以看到父级随着子级的内容的多少而改变高度，对布局不造成任何影响！

如果你在ie比较低版本的浏览器中使用`overflow：hidden；`也不能达到这样的效果，那么就加上 `zoom:1;`

所以为了让兼容性更好的话，如果使用`overflow:hidden;`来清除浮动，解决父级塌陷这个问题的话，建议配合 `zoom:1;`来使用，即：`overflow:hidden;zoom:1;`

**解决插入图片时的底部留白问题！**

插入图片时，如果存放图片的父级盒子没有给高度，那么父级盒子根据图片高度撑开，并且会多出几像素，例如：  
![在这里插入图片描述][20191107135441940.png]  
![在这里插入图片描述][20191107135448371.png]  
![在这里插入图片描述][20191107135457397.png]  
底部那个红色就是父级盒子`box`的背景色，那么处理办法有：

1、给父级加一个高度`height`，和图片一样高，并且添加`overflow:hidden;`这两个一起添加，兼容性会更好一些！  
![在这里插入图片描述][20191107135522327.png]  
![在这里插入图片描述][2019110713553380.png]  
2、如果我们不需要给盒子添加高度，让其自适应图片高，那么我们可以给`img`添加`display:block;`  
![在这里插入图片描述][20191107135545193.png]  
![在这里插入图片描述][20191107135558549.png]

[20191106223841721.png]: /images/20210704/808ff9b743364a00846eaf4e57ac3f8f.png
[20191106223933846.png]: /images/20210704/376fd4b679104e2c9f8a27c88a3b9968.png
[20191106224019219.png]: /images/20210704/9dec3b48209a4344af18008a287e18a7.png
[20191107135011914.png]: /images/20210704/0af959a291dd4dd4a10d6323c14768cc.png
[20191107135022911.png]: /images/20210704/4d32170102ad48e5aa2a3abf86bf2c43.png
[20191107135229953.png]: /images/20210704/22dd57d8e7884458a6ff114c6dfddc5c.png
[20191107135221817.png]: /images/20210704/ee7fcfd6e6b648c1b70e7a91ac1b9525.png
[20191107135243109.png]: /images/20210704/c39dd1b8a54844b79d6b543b159e489e.png
[20191107135250631.png]: /images/20210704/deb9ff44abbc4b4b84ebc8ae2a1f8d66.png
[20191107135307589.png]: /images/20210704/621a739fbbf34baeaa9b5bb423053833.png
[20191107135315126.png]: /images/20210704/330e7f25a6fd49dfb1a8b1c001423407.png
[20191107135355426.png]: /images/20210704/d3d3c4ef90434815942f5e24cf34fcaf.png
[20191107135359911.png]: /images/20210704/b71bcc643d504971b84d774458124c94.png
[20191107135441940.png]: /images/20210704/ddc513b2b2694343a72090189ceb6b9f.png
[20191107135448371.png]: /images/20210704/a0efd0782d564cef9a6822649dcca264.png
[20191107135457397.png]: /images/20210704/10aae022df284520a89bcad24b7517dd.png
[20191107135522327.png]: /images/20210704/e6487a21539f4dc1adc375b3ab52d7c5.png
[2019110713553380.png]: /images/20210704/e94daaef9fdd40ff8bb147cb597244e4.png
[20191107135545193.png]: /images/20210704/e3ea80be350947d8adda8819784d7cf4.png
[20191107135558549.png]: /images/20210704/c2c248f86d7e48b9b0184d4c92dd77de.png

overflow:hidden

发表评论取消回复

还没有评论，来说两句吧...

相关阅读