成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

WalkerXu / 2174人閱讀

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

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

隱藏溢出

清除浮動

解除坍塌

下面用例子來加深理解：

初始html內(nèi)容：




  
  
  
  Document

初始css樣式：

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

運(yùn)行結(jié)果：

使用 overflow: hidden 隱藏溢出

默認(rèn)情況下，父div沒有設(shè)置高度，它的高度可以被子div任意撐大。
當(dāng)父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設(shè)置 overflow:hidden:

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

使用 overflow:hidden 清除浮動（觸發(fā)BFC，BFC可以包含浮動的元素（清除浮動））

當(dāng)父div沒有設(shè)置高度時，我們?yōu)?b>div1和div2加上一個屬性：float:left后，我們會發(fā)現(xiàn)：背景色為黑色父div消失了。
這是因為： 浮動的元素脫離文檔元素， 不占據(jù)空間。 不浮動的元素會直接無視掉這個元素：父div無視了自己的兩個孩子，其高度為0（因為我們沒有設(shè)置父div的高度），所以父div沒有顯現(xiàn)。

.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顯現(xiàn)，有兩個辦法：

（1）讓父div也浮動起來 
.container{
  background-color: black;
  float: right;/*讓父div右浮動*/
}

效果：

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

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

（2）為父div添加： overflow:hidden 屬性用以清除浮動 
.container{
  background-color: black;
  overflow: hidden; /*給父div清除浮動*/
}

效果：

總結(jié)：
（1）（2）一個使用了都浮動的戰(zhàn)略，一個使用了清除浮動的戰(zhàn)略使父div寬容的接受了子div。
兩者的區(qū)別在于都浮動需要額外設(shè)定父div的寬度，因為浮動起來的div失去了div獨占一行的特性，而清除浮動的父div仍然獨占一行。

使用 overflow:hidden 解除坍塌（觸發(fā)BFC）

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

什么叫做坍塌：

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

可是結(jié)果：整體下移了。

.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及瀏覽器的設(shè)計者們希望我們在布局時，如果遇到上下兩個并排內(nèi)容塊的安排，最好只設(shè)置其中每個塊上或下margin的一處即可。

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

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

（1）為父div設(shè)置邊框，當(dāng)然可以設(shè)置透明邊框。 
.container{
  background-color: black;
  border: 1px solid;/*設(shè)置邊框*/
}

效果：

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

總結(jié)：

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114665.html

相關(guān)文章

  • 重拾css(9)——float

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

    CollinPeng 評論0 收藏0

  • 清除浮動（clearfix）的常見方法

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

    Kahn 評論0 收藏0

  • 為什么設(shè)置overflow為hidden可以清除浮動帶來的影響

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

    JeOam 評論0 收藏0

  • HTML+CSS復(fù)習(xí)之CSS基礎(chǔ)篇

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

    Salamander 評論0 收藏0

  • 前端技術(shù)之_CSS詳解第四天

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

    番茄西紅柿 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<