为什么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