1、給父盒子設定高度
2、clear:both
3、偽元素清除法
4、overflow：hidden

2、 clear：both

clear：意思就是清除的意思。
有三個值：
left：當前元素左邊不允許有浮動元素
right：當前元素右邊不允許有浮動元素
both：當前元素左右兩邊不允許有浮動元素

3、偽元素清除法(常用)

給浮動子元素的父盒子，也就是不浮動元素，新增一個clearfix的類，然後設定

.clearfix:after{
    /*必須要寫這三句話*/
    content: '.';
    clear: both;
    display: block;
}
 

新浪首頁推薦偽元素清除法的寫法

 /*新浪首頁清除浮動偽元素方法*/
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden

4、overflow:hidden(常用)

overflow屬性規定當內容溢位元素框時發生的事情。

說明：

這個屬性定義溢位元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，使用者代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。
有五個值：

最重要的一點是，當父盒子有設定寬高當子盒子浮動時會超出盒子此時使用overflow：hidden是裁剪功能，當父盒子沒設定寬高，則父盒子重新包裹子盒子,當兄弟盒子使用overflow：hidden時，則類似浮動，出現在同一水平，尤其是使用自適應佈局時，讓需要浮動的盒子寫在前面