015解决父级边框塌陷问题

解决方案：

1、增加父级元素的高度

      

#father{
    border: 1px #000 soild;
    height:500px;
}

 

2、增加一个空的div标签，清除浮动

      

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

 

3、overflow

      

在父级元素中增加一个  overflow: hidden;

 

4、父类添加一个伪类： after

      

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

 

小结：

1. 浮动元素后面增加空div

   增加，代码中尽量避免空div

2. 设置父元素的高度

   简单，元素假设有了固定的高度，就会被限制

3. overflow

   简单，下拉的一些场景避免使用

4. 父类添加一个伪类：after（推荐）

   写法稍微复杂一点，但是没有副作用，推荐使用！