float浮动时引起父级塌陷的解决办法

一、父级塌陷的原因：

网页布局时用到float浮动属性，只要父级元素下的子元素浮动了，肯定会影响父级元素的高度。假设父级元素下有十个子元素，我们无论是全部浮动还是只浮动了一个元素，都要对父级元素采取措施防止塌陷。如果你只浮动了一个子元素，让这个浮动的子元素高度在它同级里时最高的，运行一下会发现父级塌陷了。

二、解决方法：

1、给父级元素定义一个死高度

不推荐这种方法。高度无法确定，不能从本质上解决问题。

2、在最后一个子元素后加一个空的div，给他添加样式clear，清除两侧浮动

这种方法也很有效，但是加了一个空的div，造成代码的冗余。

3、父级元素添加overflow：hidden；

overflow是溢出管理，但是有一点不好，在有下拉菜单的时候，下拉菜单会显示不出来。

4、父级元素添加after伪类；

.clear:after{

content:"";

display:block;

clear:both;

}

这种方法虽然有些麻烦，但是没有任何副作用，对文件中的其他元素没有任何影响。

而且我们只需要在css样式表中写入一次即可，然后在需要防止父级边框的元素中，给它的class值中添加clear就行了。