清除浮动 or 闭合浮动

时间 2019-12-08

标签清除浮动闭合繁體版

原文原文链接

写在前面

前端开发会遇到许许多多须要清除浮动的状况，clearfix想必你们也不会陌生，今天就将我所认识的清除浮动分享给你们，也便于本身之后学习记忆。因为经验所致，必然会有诸多不足，欢迎你们多多指正！css

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

网上关于清除浮动闭合浮动的说法有不少，可能也会有一些人以为这两者是一个意思。那我就说下我所理解的两者的区别：html

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

平常清除浮动的方式

清除浮动的写法有不少，可是究其缘由，有如下两种：前端

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

那么什么是BFC呢

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

我认为能够当它是一套规则，只要元素属性出发了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会阻止外边距的叠加flex

有两个相邻p标签的margin-top和bottom都是20，那么正常状况下他们中间相临的外边距会叠加到一块儿，咱们可使用一个div将其中一个p包裹起来，并设置overflow:hidden那么，这两个p标签之间的就不是处在同一个bfc下，则标签外边距不会叠加，也就是会产生40的间距。spa
同一个bfc中，垂直方向上的外边距会叠加。code
bfc定义的元素，会包含浮动，也就是外元素在计算高度的时候会把浮动的内元素高度算进去。orm
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;
    }
复制代码

是否是简单不少，可是这样却由于定义的属性改变了元素特性。因此在代码中要看需求来选择。大多数都不会有什么影响。结合上面所说bfc规则，很容易就能想象出为何浮动元素会撑起外部元素。

bfc还能作些什么呢？

布局之前的布局方式相似于左侧浮动，右侧设置padding-left的方式，就额能够变为右侧不用设置padding，直接触发bfc利用第五条规则达到布局效果。
解决父元素高度塌陷（闭合内部浮动）
解决垂直方向上兄弟元素的margin重叠