父盒子塌陷问题解决办法

父盒子塌陷问题解决办法

两个盒子呈嵌套关系，对子盒子设置 margin-top时父盒子会随着子盒子同时下移，产生盒子塌陷,并且 margin-top看不到效果。

解决方法如下：
1.给父盒子添加溢出隐藏：overflow：hidden；

2.在父盒子中设置上边框：border-top;
border-top: 1px solid transparet;
设置透明上边框,不影响外观.

3.在父盒子中设置上内边距：padding-top；
padding-top:1px;

4.给父盒子设置相对定位,子盒子设置绝对定位(子绝父相);
position:relative;
position:absolute;

5.after伪类清除浮动。 外部盒子的after伪元素设置clear属性。
用于解决浮动引起的盒子塌陷问题.
#parent:after{
clear: both;
content: “”;
width: 0;
height: 0;
display: block;
visibility: hidden;
}