默认情况:
通常情况下子级div在浮动的情况下,会对父级的div后面的元素布局产生影响,因为div在浮动的情况下,会脱离正常的文档流导致父级的盒子不能被撑起。这样父级的高度就可能是0,会影响整个布局。代码和效果如下:
代码:
<style>
.parent{
width:500px;
}
.float{
width:50%;
float:left;
height:200px;
color:red;
}
.foot{
width:700px;
color:blue;
}
</style>
<div class="parent">
<div class="float"></div>
<div class="float"></div>
</div>
<div class="foot"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
效果:
可见由于子级div浮动导致父级div高度为0,而后面的div就会紧跟在父亲级而得不到自己想要的效果,那么,怎么解决呢,我总结了几种常见的方法。如下:
1.设置父级的高度
我们可以设置父级div的高度大于或等于子级的高度,这样就不会对后面的元素产生影响了。代码效果如下:
代码:
<style>
.parent{
width:500px;
height:200px;
}
.float{
width:50%;
float:left;
height:200px;
color:red;
}
.foot{
width:700px;
color:blue;
}
</style>
<div class="parent">
<div class="float"></div>
<div class="float"></div>
</div>
<div class="foot"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
效果:
2. 在浮动元素后面是用clear:both
这里有两种用法:一种是在浮动元素添加div,然后设置style=“clear:both;”,
另一种在父级div后面使用after伪类然后设置clear:both。如下
例子:添加div情况
代码:
<style>
.parent{
width:500px;
}
.float{
width:50%;
float:left;
height:200px;
color:red;
}
.foot{
width:700px;
color:blue;
}
</style>
<div class="parent">
<div class="float"></div>
<div class="float"></div>
<div style="clear:both"></div>
</div>
<div class="foot"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
效果:
例子:使用:after伪类指定插入内容
<style>
.parent{
width:500px;
}
.parent::after{
clear:both;/*清除所有浮动*/
content:'',/*不可缺少,指定插入内容*/
display:block;/*不可缺少,元素需要为块状*/
}
.float{
width:50%;
float:left;
height:200px;
color:red;
}
.foot{
width:700px;
color:blue;
}
</style>
<div class="parent">
<div class="float"></div>
<div class="float"></div>
</div>
<div class="foot"></div>
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
26
效果如下:
3. 设置父级div overflow:hidden或者auto
在div设置为overflow:hidden或者auto的时候,子级div会默认填充父级div,这样父亲div就会别撑起来了。
代码:
<style>
.parent{
width:100%;
overflow: auto;/*或者设置为hidden*
}
/* .parent::after{
clear: both;
content: '';
display: block;
} */
.float{
width:40%;
float:left;
height:200px;
margin-left: 20px;
background:red;
}
.float::after{
clear: both;
}
.foot{
width:100%;
height: 300px;
background:blue;
}
</style>
<div class="parent">
<div class="float"></div>
<div class="float"></div>
</div>
<div class="foot"></div>
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
26
27
28
29
30
31
32
效果:
4.设置所有元素浮动
原理:设置所有元素都浮动,这样所有的元素都成为一体,就不会出现父级div盒子不能被撑起的问题
代码
在这里插入代码片 <style>
.parent{
width:100%;
float: left;
}
/* .parent::after{
clear: both;
content: '';
display: block;
} */
.float{
width:40%;
float:left;
height:200px;
margin-left: 20px;
background:red;
}
.float::after{
clear: both;
}
.foot{
width:100%;
height: 300px;
float: left;
background:blue;
}
</style>
<div class="parent">
<div class="float"></div>
<div class="float"></div>
</div>
<div class="foot"></div>
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
26
27
28
29
30
31
32
33
效果:
好了,今天就分享到这里,熬夜写道现在不容易,希望对大家有所帮助。
---------------------
作者:terrorbladed
来源:CSDN
原文:https://blog.csdn.net/qq_44291675/article/details/85332924
版权声明:本文为博主原创文章,转载请附上博文链接!