边界传导问题

看一个简单的例子：
如下图所示：
body里面1个div，该div下面包含一个p标签，里面有文字。很简单。

Paste_Image.png

问题来了：里面子元素p，没有像代码设置的那样：margin 20px（相对div的），而是与div上边缘重合，与父元素div顶部紧贴一起距外层body40px。

原因如下：

### 因为作为p的父元素的div，没有外边界！

所以里面的子元素p，以为自己的margin是距离body（因为body有外边界），所以虽然p在div中，但p仍然是以为自己的父元素是body，
所以赶紧凑了过去，也就是造成了与div顶部紧贴的现象。

而且，如果p的margin设置为80px，那么div将和p一起紧贴，然后距body上边界80px。

Paste_Image.png

解决方案：

既然知道原因，那么解决的方案其实也就是给div一个边界：

（1）最简单的方法，给div一个border：1px solid red，问题解决，马上p找到自己的父元素，根据父元素的外边界和自己设定好的margin找到了自己的正确位置。

成功

（2）给p在div内找一个参照物再加入一个子元素，本例中加了一个span标签，因为有了span标签的，p根据span的位置，也找到了自己的位置。

但需要注意的就是：要加在p元素之前，否则还是找不到自己的位置，因为p的上面还是没有边界。

这样是不行的，span要放在p标签之上

成功

（3）div的overflow属性设置为hidden，其实也就是给了div一个明确的边界，所以设置后，p也可以找到自己的位置了。

成功

源码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <mata http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #box {
            height: 200px;
            width: 200px;
            margin: 40px;
            background-color: green;
            /*overflow: hidden;*/
            /*border: 1px solid red;*/
        }

        p {
            border: 1px solid red;
            /*display: block;*/
            height: 100px;
            width: 100px;
            margin: 20px auto;
            background-color: blue;
            font-size: 12px;
            text-align: center;
            vertical-align: middle;
        }
        span {

            font-size: 18px;
        }
    </style>
</head>
<body style="background-color:#ccc;border: 1px solid red;">
  <!-- <div class="container" style="padding:30px;background-color:#fff;"> -->
    <div id="con">
        <div id="box">
            <!-- haha -->
            <p>The</p>
            <span>test</span>
        </div>
    </div>
  <!-- </div> -->
</body>
</html>