CSS清除浮动的几种方法

2021-07-09 15:35发布

初学HTML和CSS时,很多同学都会对于浮动有一些疑惑,浮动了为什么需要清除浮动呢,以及我该选择哪种方式来清除浮动呢。今天我们就来通过这篇文章详细阐述一下这两个问题。

首先我们需要明确我们常用的一些元素在页面中会有自己应该放置的位置,这就是我们通常所说的文档流,举个例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap div {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        .box1 {
            background-color: aqua;
        }
        .box2 {
            background-color: yellow;
        }
        .box3 {
            background-color: orange;
        }
        .text {
            height: 300px;
            background-color: orchid;
        }
    </style>
</head>
<body>
    <div>
        <div>div1</div>
        <div>div2</div>
        <div>div3</div>
    </div>
    <p>段落</p>
</body>
</html>

以上代码,在浏览器中预览出来的效果如下:

此时如果我们使用浮动让div1、div2和div3水平排列到一行,那么可以给wrap下面的所有div设置float:left后,此时页面中会出现如下情况:

出现这种情况的原因很明显跟我们wrap下的三个div设置了浮动有关,因为元素设置了左浮动或者右浮动后会脱离文档流,其父盒wrap的高度将变为0,此时会影响到同级的text元素的位置,这就是我们所说的浮动会造成的影响,那么遇到这种问题我们就需要来清除浮动所造成的这个影响。常用的清浮动方法如下:

1、给浮动元素的父盒设置固定的高度

上图中我们发现浮动元素脱离文档流后造成wrap没有高度,从而影响到了text元素的位置,那么我们最直接的解决办法就是给wrap设置一个正好装下子元素的高度即可,但这种方法并不是最佳的,因为子元素的高度一旦发生变化时,我们就必须修改父元素设置的固定高度。

.wrap {
    height: 100px;
}

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;  
}
.float{  
    float:left;
    width:200px;  
    height:200px;  
    background:#ccc;  
}
.nofloat{    
    width:300px;    
    height:150px;    
    background:red;   
}

以上代码中我们只给灰色的盒子设置了浮动,此时细心的同学会发现受到影响的元素有两个,一个是红色盒子的宽度似乎并不是我们设置的300像素,并且父盒wrap是没有设置固定高度的,第一个子元素浮动之后,父元素的高度会塌陷到跟第二个子元素一样高。效果如下:

这时候我们将代码做一些修改后:

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

这里我们给wrap及其第二个子元素设置了overflow:hidden,所以它们都生成了一个新的BFC区域,那么根据BFC布局规则(关于BFC规则我们后续文章也会涉及到)可以得知:BFC区域不会与float box 重叠;计算BFC高度时浮动元素的高度也参与计算。所以就得到清除浮动的效果。

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

html代码:

  <div class="wrap">   
        <div class="float">浮动</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;
}

现在我们是个第一个子元素.float设置了浮动,目前的效果是第二个子元素.nofloat受到浮动的影响。

此时我们的做法可以给.float的后面添加一个空的div,class名称为clear,此盒子的作用只是用来清除浮动

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

给.clear加上清除浮动:

.clear{ clear:both;}

刷新一下效果就出来了:

这种方法比较适合元素之间是垂直排列布局的,为了不受彼此浮动的影响。

4、使用: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;
}

此时子元素浮动了,脱离了文档流,所以父元素高度塌陷,表现为父元素的边框挤在了一起。

现在给父元素添加一个clearfix类:

<div class="wrap clearfix">   
    <div class="float">浮动</div>
</div>
.clearfix{    
    *zoom:1;
}
.clearfix:after{    
    content:'';    
    display:block;        
    clear:both;    
}

现在刷新后的效果就是:

这种方法在清除浮动中是一种比较推荐的方式,因为代码具有复用性,我们将clearfix类写好,哪里需要清除浮动我们就调用定义好的类即可。

今天我们就先总结这么多常用方法,一定要动手多多实践哦!