<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    #div1{
    border:10px solid red;
    overflow: hidden;
    }
    #div2{
        background-color: black;
        width: 400px;
        height: 50px;
        float:left;
    }
    </style>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>
</html>
View Code

其实overflow:hidden可以消除这个效果的原因是它触发了BFC（block formatting context），中文为“块级格式化上下文”。触发了这个效果后无论内部元素如何改变都无法对外部容器造成影响。

在div1中加了overflow:hidden,那么就是这种效果：

如果不加边框就无法包裹住内容，也就是说就会发生崩塌效果了。

其实不仅仅是overflow:hidden可以触发bfc，以下这些因素均可：

  • <html>根元素
  • float的值不为none
  • overflow的值为auto，scroll，hidden
  • display的值为table-cell，table-caption和inline--block中的任何一个
  • position的值不为relative和static