浮动塌陷
使用float浮动的时候，父元素的高度变成0。
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
width: 200px;
height: 200px;
background-color: turquoise;
float: left;
margin: 0 20px;
}
p {
text-align: center;
}
.red{
width: 800px;
height: 50px;
background-color: red;
}
</style>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div class="red"></div>
效果如下：
image.png
ul没有定义高度，继承了li的高度，但是浮动会导致ul的高度为0，因此下面的盒子就自动上去了。
解决方案
- 给父元素设置高度
ul{
hieght:200px
}
- 给父元素加一个没用的子元素 给这个子元素设置清除浮动的属性clear;both
<ul>
<li></li>
<li></li>
<li></li>
<div style="clear:both"><div>
</ul>
- 给父元素设置overflow溢出隐藏
ul{
overflow:hidden;
}
- 使用after伪类选择器 ：
ul:after{
content:'';
clear:both;
display:block;
visibility:hidden;
}
效果图
image.png
margin塌陷
发生在两个盒子嵌套的时候，父盒子和子盒子同时设置margin的时候会出现实际的magin取的是两个margin的最大值
<style>
* {
margin: 0;
padding: 0;
}
.father{
margin-top:150px;
width: 500px;
height: 200px;
background-color: green;
}
.son{
margin-top: 70px;
width: 200px;
height: 500px;
background-color: red;
}
</style>
<div class="father">
<div class="son">
</div>
</div>
image.png
此时父盒子上边距是两者中的最大值也就是150px，而盒子没有撑开父盒子，绿色的子元素设置的margin失效了
解决方案
- 给父元素一个边框border（如果你要边框就给个边框，不需要边框就给一个透明色的边框）
.father{
margin-top:150px;
width: 500px;
height: 200px;
background-color: green;
border: 1px solid rgba(0, 0, 0, 0);
box-sizing: border-box;
}
.son{
margin-top: 70px;
width: 200px;
height: 500px;
background-color: red;
}
- 给父元素增加
overflow: hidden
- 给父元素设置
display：fixed;
- 给父元素添加
display: table;
- 给子元素的前面添加一个兄弟元素属性为:
content:'';
overflow:hidden;
效果图
image.png
