CSS清除浮动手册

以下内容仅供参考 

一、清除浮动

1.清除浮动的本质是为了清除父级元素因为子级元素浮动造成高度为0的问题。

2. 解决方式通常有五种

 ①  给父元素指定一个固定的高：但是通常不会给父元素固定高度，而是让子元素的内容把盒子自动撑开

 ②  额外标签法：在浮动元素的末尾添加一个空标签，比如<div style="clear:both">,或换成br亦可，但是会添加很多无意义的标           签

 ③  父级标签添加overflow：hidden，auto，scroll触发BFC，但是可能会隐藏到需要的内容

  ④  使用after伪元素清除浮动：给父元素添加一个伪类clearfix

.clearfix:after{

 content:" ."  ;  //  内容小点，尽量加不要空，防止旧浏览器有空隙

display:bolck;  

height:0；

visibility:hidden;

clear:both;

}

.clearfix{

*zoom:1;    //  兼容ie低版本浏览器

}

 

 ⑤ 使用before和after双伪元素清除浮动: 给父元素添加伪类clearfix，内容：

.clearfix:before, .clearfix:after{

content:" .";

display:table;

}

.clearfix:after{

clear:both;

}

.clearfix{

*zoom:1;

}