实用css技巧——清除浮动方法总结

相信不少跟我一样的前端新手在利用float浮动来进行页面的布局和定位时都会遇到这样的问题：一旦当前浮动元素的父级div不设置固定的高度height时，浮动的元素无法将父级div的内容撑开。导致整个页面的布局都乱了。究其原因竟是因为没有“清除浮动”。因为之前在实际项目开发中就遇到过这个问题，给自己造成了不少的困扰。现在想把自己用到的清除浮动的方法跟大家分享下，菜鸟学飞，总结得不全面还请各位大牛多多指教。

1）添加额外标签

在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可。

 <div class="wrap" id="float1">

<h2>添加额外标签</h2>

<div class="main left">.main{float:left;}</div>

<div class="side left">.side{float:right;}</div>

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

</div>

<div class="footer">.footer</div>

2)父元素设置 overflow：hidden/overflow：auto，具体示例代码如下：

<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">

<h2>父元素设置 overflow </h2>

<div class="main left">.main{float:left;}</div>

<div class="side left">.side{float:right;}</div>

</div>

<div class="footer">.footer</div>

3）父元素设置display:table

4）使用:before，:after 伪元素（个人比较推荐）

该方法通过在浮动元素的父级元素上添加一个具有清除浮动功能的类来实现清除浮动效果：

.clearfix:before,.clearfix:after{display:table;content:"";}

.clearfix:after{clear:both;}

<div class="wrap  clearfix" id="float3" >

<h2>父元素设置 添加类clearfix </h2>

<div class="main left">.main{float:left;}</div>

<div class="side left">.side{float:right;}</div>

</div>

注：菜鸟对于文字语言的把握可能不大好，表达的意思大家懂就好，另外附件一份自己此前看过得大牛关于清除浮动的讲解，有兴趣的童鞋可以下载下来看看。