注:以下情况都是子类元素内容没有充满一行且没有设置宽度情况下
HTML
1.浮动一个
1).当第一个浮动时:
结果:
浮动的盒子宽度不会自展,未浮动盒子内的内容环绕浮动后的盒子(后面一个盒子)
解决:
2).当中间的一个浮动:
结果:
情况同第一个浮动
解决:
同第一个浮动
3).当最后一个浮动:
结果:
最后一个溢出父级盒子
解决:
i.
但父级宽度(为最大宽度子盒子宽度)不扩展,可添加父级宽度
ii.在父容器内的最尾端添加空元素,则效果相当于情况2)
2.浮动两个
1).浮动前面两个
结果:
后面最近一个跟随的为浮动的受影响
解决:
对son3进行浮动清除----->clear:left;/both;
2).浮动第一个和最后一个
结果:
最后一个溢出;中间未浮动盒子盒子跟随前一个浮动盒子浮动
解决:
i.对中间盒子清除浮动;在末端添加空元素
ii.对中间元素清除浮动;父级浮动(宽度不扩展可为父元素添加宽度)
iii.
3).浮动后面的盒子
结果:
后面浮动元素溢出
解决:
i.同样对父层进行浮动(设置宽度)
ii.利用伪元素:after
3.浮动所有
结果:
所有子元素溢出(父元素高度为0)
解决:
i.浮动父层(设置宽度)
ii.:after伪元素清除浮动