CSS清除浮动

发表于 | 更新于: | 分类于

Alt text

一、浮动带来的问题

如果没有给父节点设置高度，在给子div设置float:left后，出现如下BUG：

  • 父节点的margin属性失效
  • 子节点没有将父节点撑开

二、一个例子

(一)Html

1
2
3
4
<div class="box">
    <div class="d1"></div>
    <div class="d2"></div>
</div>

(二)CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box{
	border: 1px solid black;
	margin: 50px auto;
	padding: 50px;
	color: #fff;
}
.d1{
    float: left;
    background: #FE7197;
    width: 100px;
    height: 100px;
}
.d2{
    float: left;
    background: #22abe2;
    width: 100px;
    height: 100px;
}

(三)效果

Alt text

三、最直接的解决方法

(一)Html

1
2
3
4
5
<div class="box">
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="clc"></div>
</div>

(二)CSS

1
2
3
.clc{
    clear: both;
}

四、最优雅的解决方法

(一)Html

1
2
3
4
<div class="box">
    <div class="d1"></div>
    <div class="d2"></div>
</div>

(二)CSS

1
2
3
4
5
.box:after{
    clear: both;
    content: '';
    display: block;
}

五、最简单的解决方法

(一)Html

1
2
3
4
<div class="box clearfix">
    <div class="d1"></div>
    <div class="d2"></div>
</div>

(二)CSS

1
2
3
.clearfix{
    overflow: hidden;
}

六、清除浮动后的效果

Alt text