Fork me on GitHub

CSS清除浮动

发表于 | 分类于

1 清浮动-clear:both

css代码

1
2
3
4
.layout{}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}

html代码

1
2
3
4
5
<div class="layout">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clear"></div>
</div>

2 清浮动-overflow:hidden

css代码

1
2
3
.layout{overflow:hidden;zoom:1;}
.left{float:left;}
.right{float:right;}

html代码

1
2
3
4
<div class="layout">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

3 清浮动-:after

css代码

1
2
3
4
5
6
7
8
9
10
11
12
.layout{}
.clearfix{zoom:1;}
.clearfix:after{
    content:"";
    visibility:hidden;
    display:block;
    clear:both;
    height:0;
    font-size:0;
}
.left{float:left;}
.right{float:right;}

html代码

1
2
3
4
<div class="layout clearfix">
    <div class="left">left</div>
    <div class="right">right</div>
</div>