float布局

清除浮动

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

清除浮动的本质

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

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

在CSS,clear属性用于清除浮动,其基本语法格式如下:

选择器 {clear: 属性值;}

left: 不允许左侧有浮动元素(清除左侧浮动影响)

right: 不允许右侧有浮动元素(清除右侧浮动的影响)

both: 同时清除左右两侧浮动的影响

额外标签法

W3C推荐的做法是通过在浮动元素末尾添加一个空标签,例如:

,或则其他标签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.