关于清浮动的几种方法及注意事项

最新推荐文章于 2020-03-28 11:29:41 发布

Jiang--Z

最新推荐文章于 2020-03-28 11:29:41 发布

阅读量453

点赞数

分类专栏： HTML+CSS 文章标签： css 前端开发布局

本文链接：https://blog.csdn.net/m0_37880452/article/details/72891024

版权

HTML+CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

浮动，前端开发人员进行css布局的必备神器，但使用浮动会使元素脱离正常文档流，给我们造成一些不想要的效果，此时就需要用到“清除浮动”这项技能了。
一般来说，清除浮动大家首先想到的使用“overflow:hidden”这个方法，这个方法清浮动最大的弊端在于“隐藏超出父元素的内容部分”，且应用于浮动元素的父元素，如果要清除浮动元素对后面元素的影响，此方法是行不通的。示例：

<style>
        .box {
            overflow: hidden;
            border: 4px solid blue;
        }
        .div1 {
            float: left;
            width: 200px;
            height: 200px;
            background: hotpink;
        }
        .div2 {
            width: 300px;
            height: 300px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>

这里写图片描述

接着一个常见的方法是 clear:both,此方法我觉得和overflow:hidden这个方法是互补的，它应用于浮动元素后面的元素，清除浮动元素对后面元素的影响，当然同时，也清除了对父元素的影响。示例，

<style>
    .box {
        border: 4px solid blue;
    }
    .div1 {
        float: left;
        width: 200px;
        height: 200px;
        background: hotpink;
    }
    .div2 {
        clear: both;
        width: 300px;
        height: 300px;
        background: green;
    }
</style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>

这里写图片描述

但是这个方法的缺点也很明显，如果单单是用来给父元素来清除浮动，就会额外的添加一个标签，从而破坏了代码的语义。这里还有一些注意的是，添加的这个元素不能有浮动属性，且是一个块元素或table元素，不然是无法给父元素清浮动的，有兴趣的童鞋，可以尝尝修改一下代码，这里就不做演示。

介绍完前面的两种方法之后，重点是第三种方法，现在各大网站，最常用的清除浮动方法。通过伪元素的使用，来清除浮动对父元素的影响。

.clearfix{
    *zoom: 1;
}
.clearfix:before,.clearfix:after{
    content: '';
    display: block;
}
.clearfix:after{
    clear: both;
}

这个方法通过给元素加class名的方法，来灵活的清除浮动对父元素影响，和第二种方法最大的不同在于，给标签加“clear: both”属性的元素，是通过伪元素来“虚拟”出的一个空元素，所以并不破坏语义结构，并且通过zoom来兼容IE6、IE7浏览器。

Jiang--Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于清浮动的几种方法及注意事项

*关于清浮动的几种方法及注意事项*浮动，前端开发人员进行css布局的必备神器，但使用浮动会使元素脱离正常文档流，给我们造成一些不想要的效果，此时就需要用到“清除浮动”这项技能了。一般来说，清除浮动大家首先想到的使用“overflow:hidden”这个方法，这个方法清浮动最大的弊端在于“隐藏超出父元素的内容部分”，且应用于浮动元素的父元素，如果要清除浮动元素对后面元素的影响，此方法是行不通的。示例
复制链接

扫一扫