CSS清除浮动的的三种方式

1 额外标签法

  在浮动元素后添加一个空的div，并设置属性clear:both;

  弊端：添加了空的div，没有意义。

2 父元素添加overflow的方法

  为浮动的父元素，示例中 ul 标签设置属性 overflow:hidden;

  弊端：在父级元素内存在定位时，超出父级元素范围的定位元素会被隐藏。

3 利用伪对象after方法

  为浮动的父元素利用伪对象 after 来在末尾设置一个隐藏的元素，并添加 clear:both; 属性。

  .clearFix:after{    clear:both;    display:block;    visibility:hidden;    height:0;    line-height:0;    content:"";}

  此方法就其根本类似于方法1，直接在末尾添加一个空的div，但是实现方式变成了伪对象 after 而已。

  目前较为普遍清除浮动的设置方式。