前端元素清浮动

什么是浮动

给元素设置float样式使元素脱离文档普通流，漂浮在普通流之上

浮动对文档的影响

子元素浮动，父级元素会出现高度为0的现象，这个现象，叫做高度塌陷（导致这现象是因为子元素浮动脱离文档层，父级元素还在文档层）

清浮动：4种方法：

1. 子元素浮动，父级元素跟着浮动

优点：不存在结构和语义化问题，代码量少。

缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐。

2.给空标签设置clear：both；

优点：通俗易懂，容易掌握。

缺点：会添加大量无语义空标签，结构与表现未分离，不利于维护。

3.给父级标签设置overflow：hidden

优点：不存在结构和语义化问题，代码量少。

缺点：内容增多时候容易造成不会自动换行，导致内容被隐藏，无法显示需要溢出的元素。

IE6需要触发haslayout。

 overflow：auto;

优点：不存在结构和语义化问题，代码量少。

缺点：多个嵌套后，FF某些情况会造成内容全选；IE中mouseover造成宽度改变时会出现最外层模块出现滚动条。

IE6需要触发haslayout。

4.after 伪元素清浮动（新建个类，写入代码，在父标签出添加类名）

优点：结构和语义化完全正确，代码量居中。

缺点：复用方式不当会造成代码量增加。

5.br标签清除浮动

优点：比空标签方式语义稍强，代码量较少。

缺点：结构与表现未分离，不推荐。