清除浮动 or 闭合浮动

最新推荐文章于 2024-10-15 15:24:52 发布

weixin_34248118

最新推荐文章于 2024-10-15 15:24:52 发布

阅读量122

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5c5027c26fb9a049f912fa10

版权

写在前面

前端开发会遇到许许多多需要清除浮动的情况，clearfix想必大家也不会陌生，今天就将我所认识的清除浮动分享给大家，也便于自己以后学习记忆。由于经验所致，必然会有诸多不足，欢迎大家多多指正！

什么是清除浮动，它与闭合浮动有区别吗？

网上关于清除浮动闭合浮动的说法有很多，可能也会有一些人觉得这二者是一个意思。那我就说下我所理解的二者的区别：

清除浮动：用代码来解释就是clear:both;我觉得更加贴切的叫法应该是清除浮动对自己的影响更为合适。它指的是设置clear属性的元素不会受到某一侧或者多侧外部浮动元素的影响。
闭合浮动：闭合浮动在我看来会更加贴切我们日常的用法，就是消除内部元素浮动所造成的外部元素塌陷的负效应，一般来说会用一些属性来触发元素的BFC,来达到目的。

日常清除浮动的方式

清除浮动的写法有很多，但是究其原因，有以下两种：

使用清除浮动，在外部元素的末尾加上一个元素，将其设置为clear:both,再将其隐藏掉，以避免对原来样式的影响。
使用闭合浮动，用特殊的属性来触发bfc,达到使内部元素可以撑起父元素的目的

那么什么是BFC呢

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

我认为可以当它是一套规则，只要元素属性出发了BFC，那么他就会在元素上应用这套上下文规则。

首先我们来看看因该如何触发它

1. 根元素 <html>
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible
复制代码

在来说说触发了bfc有什么作用

总结作用如下：

不同bfc会阻止外边距的叠加

有两个相邻p标签的margin-top和bottom都是20，那么正常情况下他们中间相临的外边距会叠加到一起，我们可以使用一个div将其中一个p包裹起来，并设置overflow:hidden那么，这两个p标签之间的就不是处在同一个bfc下，则标签外边距不会叠加，也就是会产生40的间距。
同一个bfc中，垂直方向上的外边距会叠加。
bfc定义的元素，会包含浮动，也就是外元素在计算高度的时候会把浮动的内元素高度算进去。
bfc定义的元素，使其子元素的外边距无法与定义bfc的父元素边框相交。

这样也可以解释为什么他会包裹浮动子元素
bfc元素不会与浮动元素发生重叠

clear:both清除浮动来实现撑起父元素的写法

     <div class="par">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
复制代码

    .par {
        width: 420px;
        background-color: aquamarine;
        border: #000 solid 1px;
    }
    .par:after {
        content: '.';
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
    }
    .son1,
    .son2 {
        height: 200px;
        width: 200px;
        float: left;
    }
    .son1 {
        background-color: chocolate;
    }
    .son2 {
        background-color: fuchsia;
    }
复制代码

一般来说，我们会写好一个类来定义clear:both,这也就是clearfix的由来，ie低版本需要设置zoom:1

使用bfc来闭合浮动

    .par {
        width: 420px;
        background-color: aquamarine;
        border: #000 solid 1px;
        overflow: hidden;
    }
    
    .son1,
    .son2 {
        height: 200px;
        width: 200px;
        float: left;
    }
    
    .son1 {
        background-color: chocolate;
    }
    
    .son2 {
        background-color: fuchsia;
    }
复制代码