关于css塌陷问题及浮动清除问题的解决
一. css塌陷问题(包括边界塌陷和高度塌陷)
1.上下相邻div边界塌陷
对于上下两个相邻的div而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里较大值作为显示值。 解决办法(可能还有别的)：
①.只设置上div的margin-bottom或下div的margin-top
②.使用padding代替margin实现同样的效果
③.设置上div 或 下div样式为 display: inline-block; 但不要同时设置(否则可能会并列)。
④.设置下div浮动(尽量别用，不然可能会影响布局)
2.父级容器和子级容器的上边界塌陷
如果父级div没设置border,padding或内容，子级div的margin会一直向上找，直到找到某个标签包含border,padding或内容，然后按照此div进行margin。解决办法：
①.父级设置border，可以设置为透明(transparent)。
②.父级设置padding-top。
③.父级设置overflow:hidden属性
3.子div浮动导致父div高度塌陷
如果子元素设置了浮动(会脱离文档流)而父元素又恰好没有设置高度，此时父元素由于没有内容撑起则会出现高度塌陷问题。解决办法：
①.给父盒子设置宽高(由于宽高是写死的，可能会出现很多问题)
②.让父盒子也浮动(可能会影响布局，有点坑)
③.给父盒子添加overflow属性
overflow:auto; 有可能出现滚动条，影响美观。
overflow:hidden; 可能会带来内容不可见的问题。
④.清除浮动
二.清除浮动的5种方法
①.给父盒子设置高度(可以解决浮动对下面元素的影响)
如：解决对span元素的影响。你可以理解为父元素把浮动的子元素(病毒)圈起来进行隔离，以免对父元素以外的元素进行感染(影响)。
.content{
background: red;
height:300px;
}
.left{
float: left;
height: 200px;
width: 200px;
background: green;
}
<div class="content">
<div class="left"></div>
</div>
<span>我不受影响</span>
②.额外标签法
1.外墙法：在与父元素并列的地方增加一个 块级 元素。并给其设置
clear:both; 样式。 缺点：content的div没有被撑起来，高度还是0，则其颜色属性无法展示出来。如下：
.content{
background: red;
}
.left{
float: left;
height: 200px;
width: 200px;
background: green;
}
<div class="content">
<div class="left"></div>
</div>
<div style="clear: both;"></div>
<span>我不受影响</span>
content的背景没有显示。
2.内墙法：就是把墙移动到父盒子里 (在所有浮动标签的最后一个标签后面加上一个块级元素)。本质上, 是把父盒子撑起来让父盒子有高度。如下，此时content被撑起来了，所以content的背景为红色。
.content{
background: red;
}
.left{
float: left;
height: 200px;
width: 200px;
background: green;
}
<div class="content">
<div class="left"></div>
<div style="clear:both"></div>
</div>
<span>我不受影响</span>
③.给父盒子添加overflow:hidden 或 overflow: auto;属性，作用是撑开父盒子使其有高度。缺点：可能会出现部分内容超出隐藏。
.content{
background: red;
overflow: hidden;
}
.left{
float: left;
height: 200px;
width: 200px;
background: green;
}
<div class="content">
<div class="left"></div>
</div>
<span>我不受影响</span>
④.使用父元素的after伪元素
.content{
background: red;
}
.left{
float: left;
height: 200px;
width: 200px;
background: green;
}
.content:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;/*元素隐藏*/
}
.clearfix{
*zoom: 1;/*ie6*/
}
<div class="content">
<div class="left"></div>
</div>
<span>我不受影响</span>
⑤.给父盒子添加clearfix类(双伪元素)清除浮动:
.content{
background: red;
}
.left{
float: left;
height: 200px;
width: 200px;
background: green;
}
.clearfix::after,
.clearfix::before{
content: "";
display: table;
}
.clearfix::after{
clear: both;
}
.clearfix{
*zoom: 1;/*ie6*/
}
<div class="content clearfix">
<div class="left"></div>
</div>
<span>我不受影响</span>
可以不用clearfix类，直接把样式改为 .content::after…
不过在需要多次清除浮动时clearfix会更方便。
三.实验代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.content{
background: red;
height: 300px;
}
.left{
float: left;
height: 200px;
width: 200px;
background: green;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<!--<div style="clear:both"></div>-->
</div>
<!--<div style="clear: both"></div>-->
<span>我不受影响</span>
</body>
</html>
可能会有错误，还请指正！
最后，求个赞吧！
来源：CSDN
作者：Jqy_111
链接：https://blog.csdn.net/Jqy_111/article/details/104169442