CSS 清除浮动方式归纳

CSS 清除浮动方式

浮动元素脱离文档流,就无法撑起父元素,会造成父元素的高度塌陷

一.背景

先来了解下为什么要清除浮动?

#box{
    border:1px solid red;
    /* overflow: hidden; */
}
#left{
    float: left;
    width: 500px;
    height: 300px;
    background: green;
}
#right{
    float: left;
    width: 500px;
    height: 300px;
    background: yellow;
}

<div id="box">
    <div id="left"></div>
    <div id="right"></div>
</div>

二.清除浮动

1.空标签 clear:both(不推荐)

clear:both作用:清除两边的浮动,拥有clear:both属性的元素放在浮动元素之后,会起到清除浮动的作用

思路:利用clear:both清除浮动的原理,在最后一个浮动元素之后,添加一个空的div标签,并给其设置clear:both,清除浮动之后,父元素会被里面的子元素撑开,与其同高

#box{
    border:1px solid red;
    /* overflow: hidden; */
}
#left{
    float: left;
    width: 500px;
    height: 300px;
    background: green;
}
#right{
    float: left;
    width: 500px;
    height: 300px;
    background: yellow;
}
#space{
    clear: both;
}

<div id="box">
    <div id="left"></div>
    <div id="right"></div>
    <div id="space"></div>
</div>

1.优点

简洁方便,通俗易懂

2.缺点

添加了一个无意义的标签,语义化比较差

2.overflow:hidden(不推荐)

思路:通过触发BFC,清除浮动

#box{
    border:1px solid red;
    overflow: hidden;
}
#left{
    float: left;
    width: 500px;
    height: 300px;
    background: green;
}
#right{
    float: left;
    width: 500px;
    height: 300px;
    background: yellow;
}

<div id="box">
    <div id="left"></div>
    <div id="right"></div>
</div>

1.优点

代码简洁

2.缺点

内容增多的时候,容易造成不会自动换行导致内容被隐藏掉,无法要显示溢出的元素

3.after伪元素清除浮动(推荐使用)

:after伪元素作用:可以在元素的内容之后插入新内容

.clearfix:after {
    content: '.';
    clear: both;
    visibility: hidden;
    height: 0;
    display: block;
}
.clearfix {
    *zoom: 1;
}

步骤:

(1) 添加一个伪元素,内容为一个点.

(2) 使用clear:both清除浮动

(3) 隐藏这个伪元素,但是还要占位,并且设置高度为0

(4) 转为块级元素

(5) 设置*zoom: 1; IE6清除浮动的方式, * 号只有IE6~IE7执行,其他浏览器不执行

1.优点

符合闭合浮动思想,结构语义化正确

2.缺点

IE6~7不支持伪元素 :after,使用zoom:1触发hasLayout

4.before和after双伪元素清除浮动(推荐使用)

.clearfix:after,.clearfix:before {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

1.优点

代码更简洁

2.缺点

用zoom:1触发hasLayout.