使用overflow:hidden處理元素溢出和坍塌

溢出

css溢出示意如圖，子元素（背景為粉色）的長度或寬度超出父元素（背景為綠色）。

 通過為父元素賦 overflow：hidden 樣式可將子元素超出父元素的部分隱藏起來。

也可為父元素賦 overflow：auto 或 overflow：scroll 樣式來裁剪子元素，使其可通過滾動條查看超出部分。

 overflow：auto 樣式只裁剪超出父元素的長或寬，overflow：scroll 樣式會將子元素的長或寬都裁剪。

overflow溢出 屬性

　　值: visible | hidden | scroll | auto | inherit

　　初始值: visible

　　應用於: 塊級元素、替換元素、表單元格

　　繼承性: 無

 

overflow-X | overflow-y 屬性

　　overflow-x和overflow-y的屬性原本是IE瀏覽器獨自拓展的屬性，后來被CSS3采用，並標准化。overflow-x主要用來定義對水平方向內容溢出的剪切，而overflow-y主要用來定義對垂直方向內容溢出的剪切

　　[注意]如果overflow-x和overflow-y值相同則等同於overflow。如果overflow-x和overflow-y值不同，且其中一個值顯式設置為visible或未設置默認為visible，而另外一個值是非visible的值。則visible值會被重置為auto

　　值: visible | hidden | scroll | auto | inherit | no-display | no-content

　　初始值: visible

　　應用於: 塊級元素、替換元素、表單元格

　　繼承性: 無

 坍塌

<div class="container">
   <div class="div1"></div>            
</div>

.container {
    background-color:deepskyblue;
    
}

.div1 {
    background-color: green;
    width: 100px;
    height: 100px;
    margin-top: 40px;
}

當為子div設置margin-top屬性時，出現如下的顯示，為高度塌陷。

原因：對於有塊級子元素的元素計算高度的方式,如果元素沒有垂直邊框和填充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離。

 對於上下兩個並列的div塊而言，上面div的margin-bottom和下面div的margin-top也會塌陷，就是會取上下兩者margin里最大值作為顯示值，所以從這個意義上說：CSS及瀏覽器的設計者們希望我們在布局時，如果遇到上下兩個並排內容塊的安排，最好只設置其中每個塊上或下margin的一處即可。

 解決方法：

1. 為父元素設置屬性overflow:hidden

.container {
    background-color:deepskyblue;    
    overflow: hidden;
}

2. 為父元素設置邊框（邊框顏色可為透明）

border:1px solid transparent;    

 3.為父元素設置padding，或者只設置padding-top屬性

padding-top:1px ;

 

 溢出圖片截取自https://www.cnblogs.com/xiaohuochai/p/5289653.html