CSS 高度塌陷解决方法

浮动主要造成了父元素高度塌陷，以至于父元素很多像背景颜色，边框等都不能正确的显示出来以及同级子元素的位置

我们先来看一下正常高度塌陷效果

.wrapper-min{
    width: 300px;
    border: 3px solid black;
    background-color: yellow;
	
}
.wrapperdzy{
    width: 50px;
    height: 50px;
}
.wrapper-dyz1{
    background-color: red;
    float: left;
}
.wrapper-dyz2{
    background-color: blue;
    float: right;

}

  <div class="wrapper-min">
    <div class="wrapperdzy  wrapper-dyz1"></div>
    <div class="wrapperdzy wrapper-dyz2"></div>

塌陷图片如下：

解决浮动的负面影响
①、给父元素定义高度

.wrapper-min{
   height:50px
}

效果图片
②、给父元素加上定义伪类：after

.wrapper-min:after{
    content:"";
    display:block;
    clear:both;
}

效果图

③、给父元素加上overflow：auto

.wrapper-min{
     overflow: auto;
}

效果图如下: