當我們使用float浮動子元素時，肯定會影響父元素的邊框。父級元素邊框塌陷的原因是，當父元素沒有設定足夠的大小時，父元素的高度是由父元素中最高子元素的高度決定的。一旦子元素浮動，脫離了文件流不再佔據原本的位置，父元素中沒有非浮動的可見子元素，父元素的高度就會塌陷。

　　如下程式碼所示：

　　HTML程式碼

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

　　CSS程式碼

.father{
    width: 200px;
    background-color: red;
}
.son{
    width: 75px;
    height: 50px;
    background-color: #008000;
    float: left;
}
 

　　執行結果

　　解決方案：

　　一：給父元素設定固定高度，這種方式不推薦使用，太不靈活。

.father{
    width: 200px;
    height: 200px;
    background-color: red;
                
    }
.son{
    width: 75px;
    height: 50px;
    background-color: #008000;
    float: left;
    }

　　二：給父元素設定overflow：hidden

　　三：在父元素後面加個div，設定屬性clear：both

<
 
style type="text/css">
            .father{
                width: 200px;
                background-color: red;
                
                
            }
            .clear{
                clear: both;
            }
            .son{
                width: 75px;
                height: 50px;
                background-color
 
: #008000;
                float: left;
            }
</style>
<div class="father">
            <div class="son">
                
            </div>
            <div class="clear">
                
            </div>
</div>

　　效果和方式二是一樣的，但是不推薦使用因為會造成程式碼冗餘。

　　四：使用偽類after

<style type="text/css">
            .father{
                width: 200px;
                background-color: red;
                
                
            }
            .father::after{
                content: "";
                display: block;
                clear: both;
            }
            .son{
                width: 75px;
                height: 50px;
                background-color: #008000;
                float: left;
            }
</style>
<div  class="father">
            <div class="son">
                
            </div>
            
</div>

　　這種方式本質上和方式三一樣，但是沒有後遺症。