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