float浮动造成父级元素塌陷的解决方法

　　当给一个元素的父元素设置了背景颜色之后，再为子元素设置浮动后会发现父元素的背景颜色消失了，并且当父元素有一个边框时会发现浮动元素无法将边框撑开。

　　例：没有给li设置浮动

　　<ulstyle="background:pink;border:1pxsolid#ccc">

　　<li>PHP中文网</li>

　　</ul>

　　效果图：

　　设置了浮动之后

　　<ulstyle="background:pink;border:1pxsolid#ccc">

　　<listyle="float:left;list-style:none;">PHP中文网</li>

　　</ul>

　　效果图

　　从上图中可以看出当子元素设置了浮动之后，父元素的内容没有被撑开。也就是说元素设置浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况）就会发生塌陷

　　父元素塌陷解决方法：

　　（1）给父级元素添加一个高度

　　此方法中高度无法确认，需要多次尝试设置

　　<ulstyle="height:200px;background:pink;border:1pxsolid#ccc">

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

　　<divstyle="clear:both;"></div>

　　（3）父级元素设置overflow：hidden；

　　<ulstyle="background:pink;border:1pxsolid#ccc;overflow:hidden;">

　　（4）父级元素添加after伪类；

　　.parent:after{

　　content:"";

　　display:block;