CSS清除浮动的方法

给元素设置了float属性后脱离了文档流,不占据位置,所以其父级无法将其包裹,需要清除浮动。
代码段:

<style>
    .box {
        border:1px solid black;
    }
    .item {
        width: 200px;
        height: 200px;
        background: red;
        float: left;
    }
</style>

<div class="box">
    <div class="item"></div>
</div>

效果:
未清除浮动前的效果

清除浮动的几种方法:

方法一:给父级设置高度
代码段:

 .box {
            border:1px solid black;    
            height:200px;
        }

问题解决:
给父级加高度

缺点:扩展性不好,没有解决根本问题

方法二:给父级加上float属性:

代码段:

.box {
    border:1px solid black;
    float: left;
}

成功解决:
用float清除浮动

缺点:需要给每个父级加浮动,一直延续到html,margin左右自动失效,太麻烦

方法三:加空标签,给空标签清除浮动

代码段:

<style>
        .box {
            border:1px solid black;
        }
        .item {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .clearfix {
            clear: both;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item"></div>
    <div class="clearfix"></div>
</div>
</body>

成功解决:
加空标签

缺点:增加了多余标签,IE6下有最小高度(解决后IE6下还有2px偏差)

方法四:添加换行标签

代码段:

<style>
    .box {
        border:1px solid black;
    }
    .item {
        width: 200px;
        height: 200px;
        background: red;
        float: left;
    }
</style>

<body>
<div class="box">
    <div class="item"></div>
    <br clear="all" />
</div>
</body>

成功解决:
添加换行标签

缺点:和添加空标签一样,引入了多余标签,同时不符合工作中结构、样式、行为三者分离的要求。

方法五:给父级加上inline-block

代码段:

.box {
    border:1px solid black;
    display: inline-block;
}

成功解决:
给父级添加inline-block

缺点:margin左右auto失效

方法六:使用after伪类,给浮动元素的父级加上此类:现在最常用的方法

代码段:

<style>
        .box {
            border:1px solid black;
        }
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
        .item {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
    </style>
<div class="box clearfix">
    <div class="item"></div>
</div>

成功解决:
加伪类

注:在IE6下,要用zoom属性触发hasLayout:

.clearfix { *zoom:1}

这里写图片描述

方法七:使用overflow属性

代码段:

<style>
        .box {
            border:1px solid black;
            overflow: hidden;
        }
        .item {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
    </style>
<div class="box">
    <div class="item"></div>
</div>

成功解决:
利用overflow:hidden

缺点:需要配合宽度或者zoom兼容IE6 IE7(其实还有一些问题)

以上这七种清除浮动的方法,其中利用after伪类方法最常使用,读者可以根据实际情况选择最佳方法,欢迎纠错。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值