注：以下情況都是子類元素內容沒有充滿一行且沒有設置寬度情況下

HTML

1.浮動一個

1）.當第一個浮動時：

第一個浮動

結果：

浮動的盒子寬度不會自展，未浮動盒子內的內容環繞浮動后的盒子（后面一個盒子）

后面一個盒子跟隨浮動

解決：

son2清除左浮動(或者clear：both）

2）.當中間的一個浮動：

中間一個浮動

結果：

情況同第一個浮動

后面一個盒子跟隨浮動

解決：

同第一個浮動

3）.當最后一個浮動：

最后一個浮動

結果：

最后一個溢出父級盒子

溢出

解決：

i.

父級浮動（）

但父級寬度（為最大寬度子盒子寬度）不擴展，可添加父級寬度

ii.在父容器內的最尾端添加空元素，則效果相當于情況2）

添加空元素

2.浮動兩個

1）.浮動前面兩個

浮動前面兩個

結果：

后面最近一個跟隨的為浮動的受影響

son3受影響

解決：

對son3進行浮動清除----->clear：left；/both;

2）.浮動第一個和最后一個

浮動第一個和最后一個

結果：

最后一個溢出；中間未浮動盒子盒子跟隨前一個浮動盒子浮動

解決：

i.對中間盒子清除浮動；在末端添加空元素

ii.對中間元素清除浮動；父級浮動（寬度不擴展可為父元素添加寬度）

中間元素left/both

iii.

3）.浮動后面的盒子

后面幾個浮動

結果：

后面浮動元素溢出

后面浮動元素溢出

解決：

i.同樣對父層進行浮動（設置寬度）

ii.利用偽元素：after

3.浮動所有

浮動所有子元素

結果：

所有子元素溢出（父元素高度為0）

所有子元素溢出

解決：

i.浮動父層（設置寬度）

ii.:after偽元素清除浮動