清除浮动形成的影响

float浮动可让元素浮动起来，元素浮动以后脱离原来的排列层面(未彻底脱离文档流)，处于上方。float的确让元素的布局变得简单，可是也一样给浮动起来的元素地父级带来一些问题。子级元素浮动起来后，再也不默认继承父级的宽高，而父级也检测不到子级的内容。

解决这个问题的方法就是给父级清除浮动。

（1）给父级手动添加高度

（2）给父级添加overflow：hidden

（3）给浮动的元素添加一个同级的标签，在标签内写clear：both；

（4）给父级添加一个after的伪类，在父级：after内写

parent:after {

 content:".";
 visibility:hidden;
 display:block;
 clear:both;

}