清除浮动的四种样式写法

/* 清除浮动1 */

/* 添加额外标签使用 */

.clear {

clear: both;

}

 

/* 清除浮动样式2 */

.clearfix {

overflow: auto;

/* overflow: hidden;同理 */

zoom: 1;

}

 

/* 清除浮动样式3 */

/* :after相当于额外空标签 */

.clearfix:after{

content:"";

height:0;

line-height:0;

display:block;

visibility:hidden;

clear:both;

}

.clearfix{

/* 为了兼容IE */

zoom:1;

}

 

/* 清除浮动样式4 */

/* 使用双伪元素清除浮动 */

.clearfix:before,.clearfix:after {

content: "";

display: block;

clear: both;

}

.clearfix {

zoom: 1;

}