CSS怎样革除浮动？3种办法介绍-百分百源码网

CSS怎样革除浮动？3种办法介绍

发布时间：09/01 来源：未知浏览：关键词：

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;
}

结果是这样的：

这里父容器是没有设定牢固高度的，原本第一个子元素浮动之后，父元素的高度会塌陷到跟第二个子元素一样高，但由于这里离别给第二个子元素和父元素都设定了overflow:hidden ，所以它们都生成了一个新的BFC区域，按照上文供给的BFC规划规则可以得知：BFC区域不会与float box 重叠；运算BFC高度时浮动元素的高度也参与运算。所以就得到清除浮动的结果。说得比力绕，但其实清除浮动得按照本人开发中的实际状况合理使用。

3、使用：after伪元素，给浮动元素的父元素清除浮动

html代码：

<div class="wrap">
   <div class="float">浮动</div>
</div>

css代码：

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

此时子元素浮动了，离开了文档流，所以父元素高度酒塌陷了：

可以看到父元素的边框挤在一起了。

OK，此刻给父元素增加一个clearfix类：

<div class="wrap clearfix">
   <div class="float">浮动</div>
</div>

.clearfix{
    *zoom:1;
}
.clearfix:after{
    content:'clear';
    display:block;
    height:0;
    clear:both;
    overflow:hidden;
    visibility:hidden;
}

此刻刷新后的结果就是：