css之清除浮动

清除浮动

 

问题：父盒子高度为0，子盒子不占位置，子盒子不会撑开父盒子。

（下面的标准流盒子，会跑到父盒子中的子盒子下面。）

处理办法：清除浮动。（清除子盒子因为浮动，对父子造成的影响）

使用方法：谁出问题给谁加一个clearfix类名。

清除浮动方法

1 clear：both；

在最后一个浮动元素后面添加标签<div style="clear:both"></div>

 

2. overflow：hidden；

给父集元素使用 overflow：hidden；

 

3 单伪元素标签法

 

.clearfix:after{

content: “”;

height: 0;

visibility: hidden;

overflow: hidden;

dispaly: block;

clear: both;

}

.clearfix {

zoom: 1;/*IE678*/

}

4. 双伪元素标签法（最好）

 

.clearfix:before,  .clearfix:after {

content: “”;

display: table;

}

.clearfix:after{

clear: both;

}

.clearfix {

zoom: 1;/*IE678*/

}

然后在上面父盒子中加入class=“clearfix”