父级边框塌陷的原因：
我们在进行网页布局时，会用到float浮动属性，只要父级元素下的子元素浮动了，肯定会影响父级元素的边框。假设父级元素下有十个子元素，我们无论是全部浮动还是只浮动了一个元素，都要对父级元素采取措施防止边框塌陷。为什么这样说，我们可以试验一下，如果你只浮动了一个子元素，咱们让这个浮动的子元素高度在它同级里时最高的，运行一下，你会发现父级边框塌陷了。
解决方法：
1、给父级元素添加一个高度；
不推荐这种方法。高度无法确定，一次次地试高度很麻烦，何况不能从本质上解决问题。
2、在最后一个子元素后加一个空的div，给他添加样式clear，清除两侧浮动；
这种方法也很有效，但是加了一个空的div，造成代码的冗余。
3、父级元素添加overflow：hidden；
overflow是溢出管理的意思，但是有一点不好，在有下拉菜单的时候，下拉菜单会显示不出来。
4、父级元素添加after伪类；
.clear:after{
content:"";
display:block;
clear:both;
}
这种方法虽然有些麻烦，但是没有任何副作用，对文件中的其他元素没有任何影响。
而且我们只需要在css样式表中写入一次即可，然后在需要防止父级边框的元素中，给它的class值中添加clear就行了。
