margin-top塌陷

Posted 2020-10-04 稀里糊涂林老冷

margin-top 塌陷 
在两个不浮动的盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框:

　　　一般可以把边框设置成和外部元素背景相同颜色。

 border: 1px solid black;

2、外部盒子设置 

 　　虽然没有任何实际作用，但是能解决塌陷问题。

overflow:hidden

 

3、使用伪元素类： 给外盒子class 加上一个 clearfix

　　这是推荐的做法　　

.clearfix:before{
    content: ‘‘;
    display:table;
}

 

 

4、 如果内部元素浮动，则不会出现margin-top塌陷

float:left;