- 1、额外标签法:在最后一个浮动标签后,新加一个标签,给其设置
clear:both;
。(不建议使用)- 优点:通俗易懂,方便;
- 缺点:添加无意义标签,语义化差。
- 2.父级添加 overflow属性:父元素添加
overflow:hidden
。(不推荐使用)- 优点:代码简洁;
- 缺点:内容增多的
- List item
时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素。
- 3.使用 after伪元素清除浮动:
after{ content: ""; display: block; height: 0; clear:both; visibility: hidden; }
,(推荐使用)- 优点:符合闭合浮动思想,结构语义化正确;
- 缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout。
- 4.使用 before和after 双伪元素清除浮动。(推荐使用)
- 优点:代码更简洁;
- 缺点:用zoom:1触发hasLayout。