清除浮动的方法有哪些？

在前端页面开发过程中，经常会遇到父元素中的子元素因为浮动而导致父元素高度为0的情况，如何解决这种问题，使得父元素能够撑起高度，以下提供四种解决方法：

方法一：额外标签法

在最后一个浮动标签后面添加一个新的标签，其CSS设置为clear:both。这种方式的缺点是额外增加了标签元素，而且语义化较差。

方法二：父元素添加overflow属性

.father {
    ...
    overflow: hidden;
}

采用这种方式在内容增多的情况下， 超出的内容会被隐藏掉，无法显示溢出的内容。

方法三：使用after伪元素

.father:after {
    content: '';
    height: 0;
    clear: both;
    visibility: hidden;
}
.father {
    *zoom: 1; /* ie6清除浮动的方式，*号只有ie6-ie7执行，其它游览器不执行 */
}

方法四：使用before和after双伪元素

.father:after .after:before {
    content: '';
    display: table;
}

.father:after {
    clear: both;
}

.father {
    *zoom: 1;
}

比较推荐使用方法三和方法四；其中由于ie6-7不支持伪元素：after，所以使用zoom:1触发。