元素的浮動是指 設(shè)置了浮動屬性的元素會脫離標準流的控制，移動到父元素指定位置的過程。

浮動最開始是用來做文字環(huán)繞效果的。代碼如下：

在css中，可以通過float屬性來定義浮動，其基本語法格式如下：

浮動的特性：會脫離標準流，不占位置，會影響標準流，浮動元素漂浮在其它標準流盒子上面。浮動只有左右浮動。

如果想要讓多個div在同一行顯示，必須每個元素都添加浮動。

代碼如下：

效果圖

總結(jié)：浮動的目的就是為了讓多個塊級元素在同一行上顯示。

注：塊級/行內(nèi)元素，添加浮動后，都具有行內(nèi)塊的特性 （行內(nèi)塊沒有指定寬度時，寬度為內(nèi)容的寬度）。

常用布局設(shè)計：利用浮動實現(xiàn) 兩列左窄右寬布局（左邊固定，右邊自適應(yīng)）

代碼如下：

效果圖

另外，浮動的使用可能會導(dǎo)致父元素因為子級浮動而引起內(nèi)部高度為0

即 如果子盒子1和子盒子2都設(shè)置了浮動，由于浮動元素不占有位置，而父盒子又沒有設(shè)置高度，此時底下的盒子就會往上跑。

代碼如下：

效果圖

那么，如何解決浮動帶來的這個問題呢？當(dāng)然，如果浮動的子盒子的高度是固定的，直接計算出父盒子的高度并設(shè)置就能解決。

但是，浮動的子盒子高度不固定時，就需要用到清除浮動了。

清除浮動的本質(zhì)：為了解決父級元素因為子級元素浮動引起內(nèi)部高度為0的問題。

解決方案：