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

一、盒子模型塌陷

盒子模型塌陷：子元素设置外间距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

---

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

父元素高度塌陷：当父元素未设置高度时，其高度为子元素高度，当子元素浮动时，父元素高度变为0，此时父元素下面的元素就会往上移，导致页面布局混乱，如下图：

代码如下：

.box {
            border: 1px solid red;
            /*height: 200px;*/
            /*overflow: hidden;*/
        }
.content {
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 1px solid blue;
            float: left;
            box-sizing: border-box;

        }

        /*.clear {
            clear: both;
        }*/

<div class="box">
    <div class="content"></div>
    <!--<div class="clear"></div>-->
</div>

解决方法：

1.给父元素设置高度
2.给父元素设置overflow: hidden;
3.添加一个空标签清除浮动

三、使用display:inline-block

原本是块元素的元素在使用display:inline-block后会排成一行，此时元素与元素间会留下大约5px的距离，如果不处理，会导致一行排不下，影响页面布局，如下图：

代码如下：

 * {
            margin: 0;
            padding: 0;
        }

        /*ul {
            font-size: 0;
        }*/

        li {
            list-style: none;
            display: inline-block;
            /*font-size: 16px;*/
        }

<ul>
    <li>手机</li>
    <li>运营商</li>
    <li>数码</li>
</ul>

解决方法：

1.方法一：给父元素设置font-size: 0; 然后给子元素设置font-size。

2.方法二：将子元素之间的空格和回车键全部删去