清除浮动

清除浮动
目的:由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动,准确来说,是清除浮动后造成的影响.

清除浮动的本质
清除浮动主要为了解决父元素因为子级浮动引起内部高度为0的问题.

原因:浮动元素是不占有位置的,如果父级元素没有高度的话,就会引起高度塌陷;

在CSS,clear属性用于清除浮动,其基本语法格式如下:
选择器 {clear: 属性值;}
left: 不允许左侧有浮动元素(清除左侧浮动影响)
right: 不允许右侧有浮动元素(清除右侧浮动的影响)
both: 同时清除左右两侧浮动的影响

额外标签法
W3C推荐的做法是通过在浮动元素末尾添加一个空标签,例如:<div style="clear: both"></div>,或则其他标签br等亦可.
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差.

父级添加overflow属性方法
可以通过触发BFC的方式,可以实现清除浮动效果.
给父级元素添加: overflow: hidden|auto|scroll 都可以实现.
优点:代码简洁
缺点:内容增多时候容易造成不会自动换行,导致内容被隐藏掉,无法显示需要溢出的元素.

使用after伪元素清除浮动
:afterfix:after {
    tontent: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    *zoom: 1; <* IE6\7专有 *>
}
优点:
符合闭合浮动思想,结构语义化正确
缺点:由于IE6-7不支持:after,使用zoom:1触发halLayout.

使用before和after双伪元素清除浮动
使用方法:
.clearfix:before,clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}
优点:代码更简洁
缺点:由于IE6-7不支持:after,使用zoom:1触发hasLayout.