css之清除浮动的几种方法

当我们使用float后,发现父级元素没有被撑开, 通常情况下需要清除浮动,以下介绍三种清除浮动的方法:
1. 使用overflow:hidden将元素变成BFC,即可清除内部浮动

<style>
    .box{
        border: 10px solid #C0A16B;
        width: 300px;
    }
    .child{
        width: 100px;
        height: 100px;
        float: left;
        border: 10px solid #AC2925;
    }
</style>
<body>
    <div class="box">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
.box{
    overflow: hidden;
}

为达到清除内部浮动,我们可以触发box生成BFC,那么box在计算高度时,box内部的浮动元素child也会参与计算。

2 . 伪元素

<style>
    .clearfix:after{
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix{
        width: 300px;
        border: 10px solid #C0A16B;
    }
    .child{
        width: 100px;
        height: 100px;
        float: left;
        border: 10px solid #AC2925;
    }
</style>
<body>
    <div class="clearfix">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

这个css的原理是经过使用after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个”.”,并且把他设置为块级元素(display=”block”);高度设置为0,clear=”both”,然后将其内容隐藏掉(visibility=”hidden”).这样就会撑开此块级元素。
ie下

.clearfix{
    zoom:1;
}

3 . 使用空标签

<style>
    .box{
        width: 300px;
        border: 10px solid #C0A16B;
    }
    .child{
        width: 100px;
        height: 100px;
        float: left;
        border: 10px solid #AC2925;
    }
</style>
<body>
    <div class="box">
        <div class="child"></div>
        <div class="child"></div>
        <div style="clear: both;"></div>
    </div>
</body>

在浮动标签的下添加一个空的兄弟元素,设置clear:both

欢迎分享本文,转载请保留出处:前端ABC » css之清除浮动的几种方法

分享到:更多 ()

发表评论 0