浮動塌陷
使用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塌陷
發(fā)生在兩個盒子嵌套的時候凸舵，父盒子和子盒子同時設置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
