CSS如何清除浮动？3种方法介绍-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

CSS如何清除浮动？本篇文章给大家介绍一下使用CSS清除浮动的3种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

首先这里就不讲为什么我们要清楚浮动，反正不清除浮动事多多。

下面我就讲三种常用清除浮动的方法，够用了。

1、在浮动元素后面加一个空的div，并为它清除浮动

html代码：

<div class="wrap">
   <div class="float">浮动</div>
   <div class="clear"></div>
   <div class="nofloat">不想被浮动影响</div>
</div>

css代码：

.wrap{
  width:500px;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}
.nofloat{
    width:300px;
    height:150px;
    background:red;
}

现在虽然加了一个空的div，但是并没有给它清除浮动，所以目前的效果就是第三个子元素.nofloat还是收到浮动的影响。

OK，现在给.clear加上清除浮动：

.clear{
    clear:both;
}

刷新一下效果就出来了：

PS：这种情况比较适合元素之间是垂直排列布局的，为了不受彼此浮动的影响。

2、利用BFC特性清除浮动

html代码：

<div class="wrap">
   <div class="float">浮动</div>
   <div class="nofloat">不想被浮动影响</div>
</div>

css代码：

.wrap{
  width:500px;
  border:1px solid red;
  margin:0 auto;
  overflow:hidden;
}
.float{
  width:200px;
  height:200px;
  background:#ccc;
  float:left;
}
.nofloat{
    width:300px;
    height:150px;
    background:red;
    overflow:hidden;
}