html伪元素清除浮动,使用:after伪元素清除浮动

1.clear属性只适用于块级元素

2.after伪元素加在mainBox容器上，mainBox容器本省并没没有浮动,对其子元素是不会有影响

现在代码看到的效果是mainBox有宽度，没有高度，是因为按正常的块级元素的在高度为height不显式设置(height:auto)的情况下，高度为其下所有最高块级元素的上外边界(最高行内框的上边界)和最低元素下外边界(最低行内框的下外边界)的距离或；但是设置了浮动的属性的元素将从正常流布局渲染中脱离，不参与父容器高度的计算。

想要得到正常的容器高度，就需要清楚浮动，就需要用BFC，就需要使得元素形成一个新的BFC，设置overflow:hidden就能形成个BFC，就可以解决高度问题,一个BFC内浮动元素的参与容器高度的计算

.mainBox {

width: 960px;

/*height: 300px;*/

background-color:#cff;

overflow: hidden;

/*zoom: 1;*/

}

在div.mainBox上添加after伪元素也可以达到同样的目的

.mainBox:after{

display:block;

clear:both;

height:0;

content: "";

visibility: hidden;

overflow:hidden;

}

其效果相当于:

不为div.mainBox添加after伪元素，直接在div.mainBox添加一个宽高为0的clear:both的div元素