clearfix 清除浮动

浮动现象

浮动

想象一下，浮动是可以向左或向右移动，直到它的外边缘碰到其他框或另一个浮动框的边框为止。

浮动的效果：

<body>
    <div class="container">
        <div class="left"> 

        </div>
       <div class="right">

        </div>
    </div>
</body>
<style>
    .container{
        width: 300px;
        border: 1px solid #000;
        background-color: gray;
    }
  .left{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
    }
    .right{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: right;
    }
</style>

上述代码的浮动效果如下:

现象：

可见子元素没有撑开父容器，使父元素高度坍塌

清楚浮动的方法

清楚浮动大致有四种方式：

添加以clear命名的class
在父容器里添加overflow:hidden样式
在父容器里添加overflow:auto样式
添加class以clearfix命名的after伪元素

添加以clear命名的class：

在浮动元素后添加clear命名的<div>,给div添加.clear{clear:both}样式

代码如下:

<body>
    <div class="container">
        <div class="left"> 

        </div>
        <div class="right">

        </div>
       <div class="clear">

       </div>
    </div>
</body>
<style>
    .container{
        width: 300px;
        border: 1px solid #000;
        background-color: gray;
    }
  .left{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;

    }
    .right{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: right;
    }
    .clear{
        clear:both;
    }

效果：

在父容器里添加overflow:hidden样式：

父元素样式中添加overflow:hidden后，再加上 zoom:1;
代码如下：

<body>
    <div class="container">
        <div class="left"> 

        </div>
        <div class="right">

        </div>
    </div>
</body>
<style>
    .container{
        width: 300px;
        border: 1px solid #000;
        background-color: gray;
        overflow:hidden;
        zoom:1;
    }
  .left{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
    }
    .right{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: right;
    }
</style>

其结果：

在父容器里添加overflow:auto样式：

和添加overflow:hidden方法一样，只是hidden属性换成auto,后也需加 zoom:1;
替换代码如下：

    .container{
        width: 300px;
        border: 1px solid #000;
        background-color: gray;
        overflow:auto;
        zoom:1;
    }

其清除浮动效果一样：

添加class以clearfix命名的after伪元素：

最后一种是个人感觉用起来很方便的一种方式，在css样式中添加如下代码：

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

HTML中在class后添加，直接调用，方式如下：

<style>
    .container{
        width: 300px;
        border: 1px solid #000;
        background-color: gray;
    }
  .left{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
    }
    .right{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: right;
    }
    .clearfix:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden; 
    height:0;
} 
.clearfix{zoom:1}
</style>

清除效果：

总结：

在浮动元素后添加clear命名的<div>,给div添加.clear{clear:both}样式:

优点：简单，代码少

缺点：增加页面标签，造成结构混乱

推荐指数：☆

2.在父容器里添加overflow:hidden或overflow:auto样式:

优点:只需在父容器中加入代码，操作简单

缺点：增加样式标签

推荐指数：☆☆☆

添加class以clearfix命名的after伪元素:

优点:设置公共类，减少css代码，直接套用

缺点：clearfix的class需要添加zoom: 1

推荐指数：☆☆☆☆☆

来源：oschina

链接：https://my.oschina.net/u/4097992/blog/3197385

标签

Solid

clearfix 清除浮动的几种方法、作用及总结