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

WalkerXu 發布于2019-08-30 10:56 / 2113人閱讀

摘要：使用解除坍塌觸發可以使用解除坍塌，坍塌是不分父的高度是否固定的。解除坍塌添加外邊距效果浮動的不會坍塌。它還額外肩負了解除坍塌的重任。

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

隱藏溢出

清除浮動

解除坍塌

下面用例子來加深理解：

初始html內容：




  
  
  
  Document

初始css樣式：

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

運行結果：

使用 overflow: hidden 隱藏溢出

默認情況下，父div沒有設置高度，它的高度可以被子div任意撐大。
當父div有固定高度時，如果子div的高度超過父div的高度，那么子div會超出父div的束縛，這種情況就叫溢出。
如圖：

.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沒有顯現。

.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顯現，有兩個辦法：

（1）讓父div也浮動起來

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

效果：

發現顏色塊出現在屏幕右側，父div浮動有效果，但是沒有看到父div的黑色效果，這是因為浮動的div已經失去了其“獨霸一行”的能力，我們需要手動為父div設置一個寬度，比如width:500px，之后可以看到：

.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;
}

總結：

overflow:hidden的用法在隱藏溢出和清除浮動上主要針對父div是否有固定的高度加以區分。它還額外肩負了解除坍塌的重任。

云服務器 GPU云服務器深入理解系列清除浮動深入理解linux 深入理解webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114665.html

重拾css(9)——float

摘要：導致這一現象的最根本原因在于被設置了的元素會脫離文檔流。脫離文檔流可以理解為子元素與父元素間的結構被破壞，父子關系解除。 1.引言對于我們所有的web前端開發人員，float是或者曾經一度是你最熟悉的陌生人——你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡單就那么一點知識，但卻駕馭不了它各種奇怪的現象。這就是我們又愛又恨的——float。所以，系統的學一學float是非常...

CollinPeng 2019-08-29 12:44 評論0 收藏0
清除浮動（clearfix）的常見方法

摘要：此時可能會對周圍的布局產生影響，所以清除浮動，顯得十分重要。主要的方法一使用屬性添加偽元素通過在父元素后面添加一個偽元素，設置為并清除左右浮動解決問題。目前這個方法是最新的。總結如上所述，清除浮動有兩大方法，使用屬性和建立。背景當一個父元素包含的子元素都設置為float的時候，父元素的高度會出現坍塌的現象（見下圖）。此時可能會對周圍的布局產生影響，所以清除浮動，顯得十分重要。sho...

Kahn 2019-08-30 13:19 評論0 收藏0
為什么設置overflow為hidden可以清除浮動帶來的影響

摘要：以下情況會觸發根元素的值不為的值為，，的值為，和中的任何一個的值不為和顯然我們在設置值為時使元素具有，那么子元素浮動便不會帶來父元素的高度坍塌影響。1.問題起源　　　　在平時的業務開發寫CSS中，為了滿足頁面布局，元素的浮動特性我們用的不能再多了。使用浮動的確能夠解決一些布局問題，但是也帶了一些副作用影響，比如，父元素高度塌陷，我們有好幾種可以清除浮動的方法，最常用的就是設置父元素的ove...

JeOam 2019-04-23 13:09 評論0 收藏0
HTML+CSS復習之CSS基礎篇

摘要：內容簡述關于，確實太繁雜了，內容多。寫好不易，基本上就這個調了。里面有許多屬性是可以繼承的，注意了，繼承一定是繼承父級元素的樣式在這里我就列出可以繼承的屬性，和不能繼承的屬性啦不可繼承的和。內聯元素可繼承。每個瀏覽器可能表現不一樣。內容簡述關于CSS，確實太繁雜了，內容多。寫好不易，基本上就這個調了。大家肯定聽過CSS奇淫技巧吧，關于這個我還沒有去深入了解，只是說普通的效果啥的，我...

Salamander 2019-08-29 12:38 評論0 收藏0
前端技術之_CSS詳解第四天

摘要：前端技術之詳解第四天一第三天的小總結盒模型，什么是盒子所有的標簽都是盒子。如果不在標準流，比如盒子都浮動了，那么兩個盒子之間是沒有塌陷現象的盒子居中的值可以為，表示自動。前端技術之_CSS詳解第四天一、第三天的小總結盒模型box model，什么是盒子？　　所有的標簽都是盒子。無論是div、span、a都是盒子。圖片、表單元素一律看做文本。盒模型有哪些組成：　　width、hei...

番茄西紅柿 2019-04-23 13:45 評論0 收藏0