2019-3-3更新

浮动效果重现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  .parent {
padding:10px;
width:1000px;
background: red;
}
.child {
float: left;
margin-right: 10px;
width: 50px;
height: 50px;
background: green;
}
<!-- 浮动效果 -->
<div class="parent">
<div class="child"> child</div>
<div class="child"> child</div>
<div class="child"> child</div>
</div>

图:
浮动重现

清除浮动的方式1 clear:both
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*清除浮动方式1 clear:both*/
.parent1 {
padding:10px;
width:1000px;
margin-top: 50px;
background: red;
}
.child1 {
float: left;
margin-right: 10px;
width: 50px;
height: 50px;
background: green;
}
.clear1 {
clear: both;
}

<!-- 清除浮动的方式1,使用额外标签clear:both -->
<div class="parent1">
<div class="child1"> child</div>
<div class="child1"> child</div>
<div class="child1"> child</div>
<div class="clear1"></div>
</div>

图:

解决浮动的方式1

清除浮动的方式2 overflow: hidden
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 清除浮动方式2,overflow*/
.parent2 {
padding:10px;
width:1000px;
overflow: hidden;
margin-top: 50px;
background: red;
}
.child2 {
float: left;
margin-right: 10px;
width: 50px;
height: 50px;
background: green;
}

<!-- 清除浮动方式2,使用overflow属性,定义了overflow后,浏览器会自动检查浮动区域高度 -->
<div class="parent2">
<div class="child2"> child</div>
<div class="child2"> child</div>
<div class="child2"> child</div>
<!-- 不能和position配合使用 -->
</div>

图:

解决浮动的方式1

清除浮动的方式3 定义父元素伪类after清除浮动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 清除浮动方式3,:after*/
.parent3 {
padding:10px;
background: red;
margin-top: 50px;
}
.parent3:after {
content: '';
display: block;
clear: both;
}
.child3 {
float: left;
margin-right: 10px;
width: 50px;
height: 50px;
background: green;
}

<!-- 使用伪元素清除浮动:after -->
<div class="parent3">
<div class="child3"> child</div>
<div class="child3"> child</div>
<div class="child3"> child</div>
</div>

解决浮动的方式1


2019-2-2

经常在各种前端面试题中出现,今天就将原本CSDN博客上总结的清除浮动的方式再次回顾并且搬运过来

1

定义伪类清除

1
2
3
4
5
6
7
.clearfloat:after { 
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0
}

2

定义空div进行clear

1
2
3
.clearfloat { 
clear: both
}

3

为父元素设置高度

1
2
3
4
5
.div1 {
background: #000080;
border: 1px solid red;/*解决代码*/
height: 200px;
}

4

为父元素设置overflow:hidden

1
2
3
4
5
.div1 {
background: #000080;
border: 1px solid red;/*解决代码*/
width: 98%;
overflow: hidden}
5

父元素一并浮动

1
2
3
4
5
6
7
.div1 {
background: #000080;
border: 1px solid red;/*解决代码*/
width: 98%;
margin-bottom: 10px;
float: left
}