創作不易 拒絕白嫖 點個贊唄
關注專欄 學透CSS,帶你走進CSS的深處！！！
前言
網頁的設定在很多時候并不是正好滿足一頁，拿我們經常用的掘金來說，因為使用了資料的分頁加載，如果你想看更多的文章的話，需要不停的往下滑動，在瀏覽器的右邊會一直存在著一個滾動條，這就是這篇文章想要了解的元素，在網頁中當一頁無法容納所有的資料的時候，我們經常使用overflow來進行設定，
overflow
overflow 是overflow-x 和overflow-y的簡寫，用來設定當一塊級元素（通常設定了height/max-height）的內容太大而超出范圍的時候，元素內容如何加載，當元素的white-space設定為nowrap也滿足，
語法
overflow：屬性值；
overflow: [overflow-x] [overflow-y];
當你設定一個值的話，則同時對x和y軸生效
你也可以分別設定x和y軸的值，
屬性值
下面的所有例子都依賴于：
div{
height:100px;
width: 100px;
border: 1px solid #000;
}
overflow: visible;
默認值，內容不會被修剪，會呈現在元素框之外
overflow: hidden;
內容會被修剪，并且其余內容不可見
overflow: scroll;
內容會被修剪，瀏覽器會顯示滾動條以便查看其余內容，無論內容是否超出，均會顯示滾動條
overflow: auto;
瀏覽器自己決定是否顯示滾動條，如果內容沒有超出則不會顯示滾動條，
overflow: inherit;
規定從父元素繼承overflow屬性的值
visible+auto 或者auto+visible的有趣現象
當其中一方被設定了auto的話，visible的表現也會是auto
舉例1：overflow: auto visible;
如圖所示，正常來說y軸設定了visible，y軸不應該出現滾動條，內容應該超出元素啊，
舉例1：overflow: visible auto ;
這里我們設定了文字不換行，
overflow: visible auto;
white-space: nowrap;
}
因為設定了文字不換行，所以x軸的內容應該是超出的，但是卻出現了滾動條，
配合text-overflow 文字省略
我們還以掘金為例，這是云大佬的一篇文章，大家仔細看一下他的標題，標題的長度已經超出了盒子的寬度，掘金的處理，是使用省略號來表示標題的剩余內容，
那么這種效果是如何是實作的呢？其實很簡單，我們上面其實已經大概出現這種效果了，
- 超出文字隱藏：overflow：hidden;
- 文字不換行：text-wrap:nowrap;
最后一種省略號，就是使用text-overflow，
實作如下：
div{
height:100px;
width: 300px;
border: 1px solid #000;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
<div>
【利器篇】35+精選chrome插件，含15+前端插件，總有一款值得你停留，
</div>
overflow:hidden;清除浮動
當父元素沒設定高度的時候，子元素float的時候，父元素高度會塌陷，子元素溢位，
.parent {
border: 5px solid red;
width: 300px;
}
.child {
border: 5px solid blue;
width:100px;
height: 100px;
float: left;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
當你在父元素parent加上，overflow: hidden;就會出現下面的效果，
父元素高度正常，
原理；
- overflow:hidden;會自動產生一個BFC，
- 瀏覽器在計算BFC的高度時：BFC浮動元素的高度也要參與計算，即父元素不會忽略自己里面的浮動元素的高度，如果你的父元素的高度設定的auto的話，那么它的高度就會等于浮動元素的高度，
overflow:hidden;解決外邊距折疊問題
折疊的條件：
- 兩個元素的 margin 必須是 相鄰 的
- 處于非float或者絕對定位的盒子，
- 垂直方向上相鄰
具體就是下面這種效果：
.block1 {
width: 50px;
height: 50px;
background-color: silver;
margin: 10px;
}
.block2 {
width: 50px;
height: 50px;
background-color: silver;
margin: 10px;
}
<div clss="container">
<div class="block1"></div>
<div class="block2"></div>
</div>
仔細看最后只剩下了一個外邊距，
解決辦法：
<div style=" overflow: hidden;">
<div class="block2"></div>
</div>
在下面的加上一個父元素div，形成一個BFC，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/303631.html
標籤：其他