容器高度为0

灰色盒子没有设置高度导致元素不显示

添加高度后显示

删除高度，给容器添加css

    overflow: hidden;
    clear:both;

高度为子元素的高度

clear:both

青色盒子设置了浮动，紫色盒子没有设置浮动

给紫色盒子添加

    clear:both;

将容器高度删除

after伪对象方式

给容器添加css

.con::after{
    content:"";
    display:block;
    clear:both;
}