爲什麼overflow：hidden會影響背景對具有頂部/底部邊距的嵌套div的div的可見性？

我希望標題不是很混亂。正如你在下面的例子中看到的那樣，有一個外部div和一個內部div，我爲內部div設置了一個margin-top:100px。在「邊緣區域」，默認情況下我們看不到外部div的背景。但是，如果添加overflow：隱藏到外部div，則會顯示背景。有人能解釋爲什麼發生這種情況嗎爲什麼overflow：hidden會影響背景對具有頂部/底部邊距的嵌套div的div的可見性？

我希望我已經在這裏理解了，因爲我不是英語母語的人。

$("button").on("click", function() { 
 
    $(".outer").toggleClass("hidden"); 
 
});

div.outer { 
 
    background: red; 
 
    width: 100px; 
 
} 
 
div.outer.hidden { 
 
    overflow: hidden; 
 
} 
 
div.inner { 
 
    margin-top: 100px; 
 
    background: blue; 
 
    height: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div class="outer"> 
 
    <div class="inner"></div> 
 
    </div> 
 
    <br> 
 
    <button>toggle</button> 
 
</body> 
 

 
</html>

來源

2015-11-06 zhanziyang