margin-top塌陷问题的解决与position、display、overflow、float、margin合并等几种特性的叠加关系

转载https://blog.csdn.net/weixin_40612082/article/details/80461818

1.给父元素增加边框
为了不影响原先的图像效果，可以将边框颜色设置为白色（与浏览器背景颜色一致）

2.溢出隐藏
在父元素的style里面添加overflow：hidden；

3.利用浮动
给父元素的style添加浮动，但是这种方法不推荐使用。因为会带来未知的错误

4.给父元素添加position:fixed;
这里用到了定位的知识，将父元素显示在固定位置，就不会受margin-top塌陷的问题影响

5.使用伪元素，给父元素设置display：table;

伪元素之所以被称为伪元素，就是因为他们不是真正的页面元素，html没有与之对应的元素，但是其用法和表现行为和真正的元素一样，所以被成为伪元素。
.clearfix::before{
content: ”;
display: table;
}
.clearfix 是给父元素增加的另外一个类名，这是我们推荐的解决办法，既能解决margin-top塌陷问题，又不会出现其他附加的未知错误。

下面附上调试代码：
    <div class="box clearfix">
        <div class="con"></div>
    </div>
    
        .clearfix::before{
            content: '';
            display: table;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            margin:0px auto; 
        }
        .con{
            width: 100px;
            height: 50px;
            background-color: green;
            margin-top: 100px;
        }

1、如果元素的display: none，那么position，float不起作用。

2、如果元素拥有position: absolute或position: fixed属性，那么float不起作用。

3、如果元素的float属性值不是none，元素会脱离文档流，根据float属性值来显示。

4、设置了float、position: absolute、display: inline-block属性的元素，margin不会和垂直方向上的其他元素的margin发生外边距合并。

5、设置了overflow: hidden属性的元素，不和它的子元素发生margin合并。