一、盒子模型塌陷
盒子模型塌陷:子元素设置外间距margin-top,导致父元素连带向下,如下图
代码如下:
* {
margin: 0;
padding: 0;
}
.box1 {
width: 300px;
height: 300px;
background-color: #0077aa;
/*border-top: 1px solid blue;*/
/*padding: 1px;*/
/*overflow: hidden;*/
}
.box2 {
width: 150px;
height: 150px;
background-color: yellowgreen;
margin-top: 20px;
}
<div class="box1">
<div class="box2"></div>
</div>
解决方法
1.给父元素设置border(border-top) 2.给父元素设置padding(padding-top) 3.给父元素设置overflow:hidden
二、浮动导致的父元素高度塌陷
父元素高度塌陷:当父元素未