导致页面布局混乱的几个元凶

一、盒子模型塌陷

盒子模型塌陷：子元素设置外间距margin-top，导致父元素连带向下，如下图

代码如下：

 * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 300px;
            height: 300px;
            background-color: #0077aa;
            /*border-top: 1px solid blue;*/
            /*padding: 1px;*/
            /*overflow: hidden;*/
        }

        .box2 {
            width: 150px;
            height: 150px;
            background-color: yellowgreen;
            margin-top: 20px;
        }

    <div class="box1">
        <div class="box2"></div>
    </div>

解决方法

 1.给父元素设置border（border-top）
 2.给父元素设置padding(padding-top)
 3.给父元素设置overflow:hidden

---

二、浮动导致的父元素高度塌陷

父元素高度塌陷：当父元素未