四种解决父级边框塌陷方法

问题引入

当我们使用浮动时，可能出现元素超出父级元素的情况
如图

可以看到父级边框出现了塌陷情况

解决方案一：在父级属性设置高度（不推荐）

.father{
    border: 1px solid black;
    height: 10000px;
}

解决方案二：添加一个空div块

 <div class="clear"></div>
 .clear{
    clear: both;
    margin: 0;
    padding: 0;
}

解决方案三：父级添加overflow属性

.father{
    border: 1px solid black;
    overflow: hidden;
}

解决方案四：添加父级after伪类（推荐）

.father:after{
    content: '';
    display: block;
    clear: both;
}

解决效果对比