浮动对页面的影响

如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。

1.overflow属性

overflow:hiddle; 先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响. 注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.

2.额外标签法

.clear{ clear:both; } 在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响. 　a.内部标签：会将这个浮动盒子的父盒子高度重新撑开. b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子. 注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.

3.使用伪元素

clearfix:after{ 　　　　　　centent:"";//设置内容为空 　　　　　　height:0;//高度为0 　　　　　　line-height:0;//行高为0 　　　　　　display:block;//将文本转为块级元素 　　　　　　visibility:hidden;//将元素隐藏 　　　　　　clear:both//清除浮动 　　　　　} 　　　　.clearfix{ 　　　　　　zoom:1;为了兼容IE 　　　　}

4.使用双伪元素

.clearfix:before, .clearfix:after {                   content: "";                   display: block;                   clear: both;             }             .clearfix {                   zoom: 1;             }