css=＞清除浮动,解决图片留白,元素留白问题

二.浮动:

    1..清除浮动的方法:

1.额外标签法,在元素后添加额外标签,并且设置clear:both
2.设置父元素的overflow为hidden(触发BFC)或者设置父元素高度
3.使用伪元素选择器清除浮动
.parent:after{
    content:'';
    display:block;
        height:0;
        visibility:hidden;
        clear:both;
}
4.使用双伪元素清除浮动
.clearfix:before,.clearfix:after{
    content:'';
    display:table;
}
.clearfix:after{
    clear:both;
}
//兼容ie6,7
.clearfix{
    *zoom:1;
}

 

 

三:留白问题

    1.解决图片和div间留白问题:

1.父元素font-size:0
2.父元素line-height:0
3.vertical-align:bottom
4.把元素设置成块元素

 

    2.解决两个inline-block的div间留白问题

产生原因:

    两个元素间有换行,空白符,被浏览器渲染的时候回保留一个空白符,如果父字体大小不为0,就会产生空白

1.设置父font-size为0
2.前标签尾和后标签头之间顶住(不现实)
3.设置元素为浮动