默认情况：
通常情况下子级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
版权声明：本文为博主原创文章，转载请附上博文链接！