CSS 深刻理解：overflow: hidden——隱藏溢出、清除浮動、解除坍塌

時間 2019-12-04

標籤 css 深刻理解 overflow hidden 隱藏溢出清除浮動解除欄目 CSS 简体版

原文原文鏈接

overflow:hidden 的主要功能有三個：css

隱藏溢出
清除浮動
解除坍塌

下面用例子來加深理解：html

初始html內容：瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
</div>
</body>
</html>

初始css樣式：佈局

.container{
  background-color: black;
}
.div1{
  background-color: aqua;
  width: 100px;
  height: 100px;
}
.div2{
  background-color: red;
  width: 100px;
  height: 100px;
}

運行結果：
ui

使用 `overflow: hidden` 隱藏溢出

默認狀況下，父div沒有設置高度，它的高度能夠被子div任意撐大。
當父div有固定高度時，若是子div的高度超過父div的高度，那麼子div會超出父div的束縛，這種狀況就叫溢出。
如圖：spa

.container{
  background-color: black;
  height: 150px; /*給父div添加固定高度*/
}

.div1{
  background-color: aqua;
  width: 100px;
  height: 100px;
}
.div2{
  background-color: red;
  width: 100px;
  height: 100px;
}

爲了隱藏子元素溢出的部分，能夠爲父div設置 overflow:hidden:設計

.container{
  background-color: black;
  height: 150px; /*給父div添加固定高度*/
  overflow: hidden; /*隱藏溢出*/
}

使用 `overflow:hidden` 清除浮動（觸發BFC，BFC能夠包含浮動的元素（清除浮動））

當父div沒有設置高度時，咱們爲div1和div2加上一個屬性：float:left後，咱們會發現：背景色爲黑色父div消失了。
這是由於： 浮動的元素脫離文檔元素，不佔據空間。不浮動的元素會直接無視掉這個元素：父div無視了本身的兩個孩子，其高度爲0（由於咱們沒有設置父div的高度），因此父div沒有顯現。code

.container{
  background-color: black;
}

.div1{
  background-color: aqua;
  width: 100px;
  height: 100px;
}
.div2{
  background-color: red;
  width: 100px;
  height: 100px;
}
.div1,.div2{
  float: left;/*讓兩個子div浮動*/
}

想讓父div顯現，有兩個辦法：htm

（1）讓父`div`也浮動起來

.container{
  background-color: black;
  float: right;/*讓父div右浮動*/
}

效果：

發現顏色塊出如今屏幕右側，父div浮動有效果，可是沒有看到父div的黑色效果，這是由於浮動的div已經失去了其「獨霸一行」的能力，咱們須要手動爲父div設置一個寬度，好比width:500px，以後能夠看到：ip

.container{
  background-color: black;
  float: right;/*讓父div右浮動*/
  width: 500px; /*給父div設置寬度*/
}

（2）爲父`div`添加： `overflow:hidden` 屬性用以清除浮動

.container{
  background-color: black;
  overflow: hidden; /*給父div清除浮動*/
}

效果：

總結：
（1）（2）一個使用了都浮動的戰略，一個使用了清除浮動的戰略使父div寬容的接受了子div。
二者的區別在於都浮動須要額外設定父div的寬度，由於浮動起來的div失去了div獨佔一行的特性，而清除浮動的父div仍然獨佔一行。

使用 `overflow:hidden` 解除坍塌（觸發BFC）

可使用overflow:hidden解除margin坍塌，坍塌是不分父div的高度是否固定的。

什麼叫作坍塌：

爲div1 添加一個屬性： margin-top: 50px; 本想獲得這樣的效果：

但是結果：總體下移了。

.container{
  background-color: black;
}
.div1{
  background-color: aqua;
  width: 100px;
  height: 100px;
  margin-top: 50px;/*添加外邊距*/
}
.div2{
  background-color: red;
  width: 100px;
  height: 100px;
}

CSS中存在一個margin collapse，即邊界塌陷或者說邊界重疊。

對於上下兩個並列的div塊而言，上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下二者margin裏最大值做爲顯示值，因此從這個意義上說：CSS及瀏覽器的設計者們但願咱們在佈局時，若是遇到上下兩個並排內容塊的安排，最好只設置其中每一個塊上或下margin的一處便可。

但對於父塊div內含子塊div的狀況，就會按另外一條CSS慣例來解釋了，那就是：對於有塊級子元素的元素（父元素）計算高度的方式，若是元素沒有上下邊框和填充，那其高度就是第一個子元素頂部和底部邊框邊緣之間的距離。

解決父子div中頂部margin cllapse的問題,有下列方法：

（1）爲父`div`設置邊框，固然能夠設置透明邊框。

.container{
  background-color: black;
  border: 1px solid;/*設置邊框*/
}

效果：

（2）給父div添加padding，讓父div將子div擠下去。

.container{
  background-color: black;
  padding-top: 50px;
}

效果：

可是上面兩種方法都會改變盒子大小。

（3）使用 `overflow: hidden` 解除坍塌。

.container{
  background-color: black;
  overflow: hidden; /*解除坍塌*/
}
.div1{
  background-color: aqua;
  width: 100px;
  height: 100px;
  margin-top: 50px;/*添加外邊距*/
}
.div2{
  background-color: red;
  width: 100px;
  height: 100px;
}
效果：
![clipboard.png](/img/bVbsV8n)

（4）浮動的`div`不會坍塌。

.container{
  background-color: black;
}
.div1{
  background-color: aqua;
  width: 100px;
  height: 100px;
  margin-top: 50px;/*添加外邊距*/
  float: right; /*添加右浮動*/
}
.div2{
  background-color: red;
  width: 100px;
  height: 100px;
}