清除浮动

清除浮动的作用

为了解决父级元素因为子级元素浮动导致高度为0的问题,将浮动的盒子圈在内部，让父盒子闭合出口和入口，防止子元素影响其他元素。(准确地说，并不是清除浮动，而是清除浮动后造成的影响)
在CSS中，clear属性用于清除浮动

---

清除浮动的方法

• 额外标签法:在最后浮动的盒子后加div标签，如<div class="clear"></div>，并在css中赋予 .clear{clear：both}属性即可清除浮动。（清除浮动后，父盒子会自动检测子盒子的高度，比较简便但是结构性差）
  
• overflow法：给父盒子增加overflow属性，如.father{overflow:hidden;}(代码简单，但是内容较多时，溢出的内容会被隐藏）
  
• after伪元素法：给浮动元素的父盒子添加clearfix标签， .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
  

---

总结

以上较为常用的方法为overflow法与after伪元素法。

1. 当父元素文本内容较多时，不建议用overflow，容易将重要的信息隐藏掉，因此，此方法更适合应用在一些小模块的内容中。
2. 在网页布局中，after伪元素的应用频率较高，不但操作简便，而且可以使文档结构更清晰，强烈推荐此方法。