CSS高度坍塌和外边距溢出问题及解决方法

成因

解决方法

1 根据子元素的最大高度为父元素设置高度

2 父元素也设置为浮动

3 父元素设置 overflow: auto | hidden; 属性

4 为父元素增加伪元素（推荐）

/**
 .div-parent 为父元素类选择器
 设置 content 为空，父元素最后一个伪元素子元素内容为空
 clear: both 会清除该元素左右两端的所有的浮动元素，即该元素在父元素中处于所有子元素的最     下方，且存在于文档流中，占页面空间；父元素识别到该元素将会自适应高度
*/
.div-parent::after {
    display: table;
    content: "";
    clear: both;
}

成因

解决方法

/**
    设置外边距的元素不与父元素直接接触既不会一起发生偏移
而父元素前或后添加的伪元素子元素 content 为空，所以不会出现不希望看到的效果
*/
 /** 上外边距溢出 */
.div-parent::before {
display: table;
 content: "";
 }
  /** 下外边距溢出 */
 .div-parent::after {
 display: table;
content: "";
  }