注：以下情况都是子类元素内容没有充满一行且没有设置宽度情况下

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伪元素清除浮动