浮動佈局是我們學習css階段一個非常重要的佈局方式,在學習浮動佈局之前我們首先來認識一下什麼是浮動佈局。

1. 為何使用浮動佈局:

浮動佈局解決了多個塊級元素在一行顯示的問題 浮動分為左浮動和右浮動 (float : left; / float : right; )

2.浮動後元素有什麼特點?

開啟浮動後 : 1. 浮動後元素會立即脫離原來的文件流(在文件流中沒有該元素的位置)

　　　　　　2. 浮動後元素的層級會預設上調 會覆蓋到其他的元素

　　　　　　3. 浮動後元素覆蓋其他元素但不會覆蓋文字

　　　　　　4. 行元素和行內塊元素浮動後會預設變成塊元素 變成塊元素之後元素的高度預設由內容撐開

　　　　　　5. 浮動不會繼承

3. 浮動後對兄弟元素和父元素有什麼影響?

對兄弟元素的影響 : 當前元素開啟浮動後後面的兄弟元素會預設上移,如果想讓兄弟元素在原來的位置保持不動可以清除浮動對後面兄弟元素的影響。

對父元素的影響 : 高度塌陷 (由於子元素開啟了浮動脫離了原來的文件流,父元素沒有設定高度,所以引起了父元素的高度塌陷)。

4. 清除浮動的幾種辦法

1. 給父元素設定高度(不推薦)

2.新增一個空元素然後清除浮動(有多餘結構 不推薦)

3.給父元素設定 ovaflow:hidden;

4.給父元素也設定浮動

5. 使用偽元素(終極解決方案)

.clearfix::after{

　　clear : both ;

　　display : block;

　　content : " ";

}