CSS解决父级边框坍塌的问题

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

首先在父级标签内添加如下<div>标签

    <div id="clear"></div>

然后在CSS中对该标签进行如下修饰：

 #clear{
    clear:both;
    margin:0px;
    padding: 0px;
}

优点：简单。缺点：尽量避免空的<div>标签。

2. 设置父元素的高度

width: 200px;
height: 200px;
border:1px solid #058f64;

优点：简单。缺点：元素有固定高度就会被限制。

3. overflow

overflow:hidden /*隐藏超出的部分*/
overflow：scroll /*滚动*/

优点：简单。缺点:下拉的一些场景不适用。

4.在父类添加伪类（推荐）

/*father为父类
<div class="father">
*/
#father:after{
	content:'';
	display:block;
	clear:both;
}

优点：不更改原来的代码。缺点：稍复杂。