浮動塌陷

使用float浮動的時候，父元素的高度變成0。

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
            width: 200px;
            height: 200px;
            background-color: turquoise;
            float: left;
            margin: 0 20px;
        }

        p {
            text-align: center;
        }

        .red{
            width: 800px;
            height: 50px;
            background-color: red;
        }
    </style>

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="red"></div>

效果如下：

image.png

ul沒有定義高度，繼承了li的高度，但是浮動會導致ul的高度為0，因此下面的盒子就自動上去了。

解決方案

• 給父元素設置高度

ul{
  hieght:200px
}

• 給父元素加一個沒用的子元素 給這個子元素設置清除浮動的屬性clear;both

 <ul>
        <li></li>
        <li></li>
        <li></li>
        <div style="clear:both"><div>
    </ul>

• 給父元素設置overflow溢出隱藏

ul{
  overflow:hidden;
}

• 使用after偽類選擇器 ：

ul:after{ 
   content:'';
   clear:both; 
   display:block;   
   visibility:hidden; 
}

效果圖

image.png

margin塌陷

發生在兩個盒子嵌套的時候，父盒子和子盒子同時設置margin的時候會出現實際的magin取的是兩個margin的最大值

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father{
            margin-top:150px;
            width: 500px;
            height: 200px;
            background-color: green;
        }

        .son{
            margin-top: 70px;
            width: 200px;
            height: 500px;
            background-color: red;
        }
       
    </style>

    <div class="father">
        <div class="son">

        </div>
    </div>

image.png

此時父盒子上邊距是兩者中的最大值也就是150px，而盒子沒有撐開父盒子，綠色的子元素設置的margin失效了

解決方案

• 給父元素一個邊框border（如果你要邊框就給個邊框，不需要邊框就給一個透明色的邊框）

      .father{
            margin-top:150px;
            width: 500px;
            height: 200px;
            background-color: green;
            border: 1px solid rgba(0, 0, 0, 0);
            box-sizing: border-box;
        }

      .son{
            margin-top: 70px;
            width: 200px;
            height: 500px;
            background-color: red;
        }

• 給父元素增加

overflow: hidden

• 給父元素設置

display：fixed;

• 給父元素添加

display: table;

• 給子元素的前面添加一個兄弟元素屬性為:

content:'';
overflow:hidden;

效果圖

image.png