前端人人都应该理解的盒模型BFC渲染机制

时间 2019-11-08

标签前端人人应该理解模型 bfc 渲染机制繁體版

原文原文链接

前端人人都要懂的盒模型BFC渲染机制

为何咱们说,前端工程师有必要须要了解BFC渲染机制?

由于若是你一个前端压根没据说过BFC,那你是如何理解下面这几个css现象的呢?css

现象一: 垂直方向上元素margin的合并现象

首先,有父子嵌套关系的2个元素,代码和示例以下:html

<style>
        .father {
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    

  ---- html部分--- 
  
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>

而后,咱们给子元素添加一个margin-top: 50px时前端

.son {
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 50px;
        }

咱们神奇的发现父子元素同时"掉下来了50px",如图所示前端工程师

因此这里的问题是: 为何2个div一块儿向下掉呢?app

现象二: 垂直方向上元素margin的合并现象

如今,咱们有2个兄弟关系的元素,代码和示例以下:布局

<style>
        .bother1 {
            width: 100px;
            height: 100px;
            background: skyblue;
        }
        
        .bother2 {
            width: 100px;
            height: 100px;
            background: cadetblue;
        }
    </style>
    
     ---- html部分--- 
     
    <body>
        <div class="bother1"></div>
        <div class="bother2"></div>
    </body>

而后,咱们给上边的元素添加 margin-bottom:50px , 下边的元素添加 margin-top : 50px。spa

.bother1 {
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-bottom: 60px;
        }
        .bother2 {
            width: 100px;
            height: 100px;
            background: cadetblue;
            margin-top: 40px;
        }

如图所示:翻译

若是你眼力不错,或者亲自试试,会发现2个div之间设置了100px的距离,可是他们如今实际的间距倒是50px。code

因此这里的问题是: 为何2个div的间距是50px,而非100px呢?htm

现象三: overflow:hidden,能够清除浮动形成的反作用

一对父子关系的div,父元素的高度是经过子元素的高度撑开的,如图

<style>
        .father {
            width: 150px;
            border: 2px solid red;
        }
        .son {
            width: 100px;
            height: 100px;
            background: skyblue;
        }
    </style>
    
     ---- html部分---
          
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>

而后,咱们给子元素float:left以后,子元素脱离的文档流,因而父元素的高度为0了,如图

.son {
            width: 100px;
            height: 100px;
            background: skyblue;
            float : left;
        }

这个现象,我相信你们都知道如何解决,不就是须要"清除浮动"吗?

我这里想说的是,"清楚浮动"有2种原理,一类是clear: both,一类就是依靠BFC原理.

因此这里的问题是: 为何给父元素添加 overflow: hidden 就能够"清除浮动"呢?

现象四: overflow:hidden 配合浮动,能够实现2栏自适应布局

如图所示,咱们已经实现了左侧固定300px,右侧自适应的布局

因此这里的问题是: 为何添加 overflow: hidden 和浮动就能够实现2栏自适应布局呢?

<style>
        .wrapper, * {
            padding: 0;
            margin: 0;
        }

        .left {
            width: 300px;
            height: 100px;
            background: red;
            float: left;
        }

        .right {
            height: 100px;
            background: skyblue;
            overflow: hidden;
        }

    </style>
    
     ---- html部分---
    
    <div class="wrapper">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

好了,以上四个看似毫无关系的"奇葩"现象,不知道是否理解出现这些现象的缘由呢?

若是回答不上来,那就建议你好好看下这篇文章了。

固然若是你没有见过这些现象的,那你就赚到了,这么多"奇葩"问题,你看一篇文章就全解决了,省了你很多力气呢!

CSS盒模型

CSS盒模型的基本概念: 盒模型分为W3C盒模型和IE盒模型,他们的区别是计算width和height的方式不一样,IE盒模型的width是从border开始计算的。
如何设置CSS盒模型的类型 : 经过CSS3的 box-sizing:border-box就能够设置为IE盒模型了,默认是W3C盒模型

BFC渲染机制

BFC基本慨念

BFC是英文缩写,翻译为"块级格式化上下文"。

说白了BFC就是一种css盒模型的渲染规则。既然说了是渲染规则,那你天然须要去记住这些规则了,无法解释为何。

BFC渲染规则

BFC其实有不少渲染规则,咱们这里说4条比较重要的规则,知道这些规则,你就能够回答上面的4个现象了。

规则1: 建立了BFC的元素中,在垂直方向上的margin会发生重叠。根元素<html>就是一个BFC元素 (这个能够解释margin重叠)
规则2: BFC元素在页面上是一个独立的容器,外面的元素和里面的元素互不影响。
规则3: BFC元素不会和浮动的元素重叠。(这个能够解释两栏自适应)
规则4: 计算BFC元素的高度时,里面浮动元素的高度也会参与计算 (用来解释overflow:hidden能够清除浮动)

普通元素如何建立BFC

首先咱们根元素html,就是最大的BFC容器。

建立BFC的方式不少,常见包括:

float不为none的均可以
overflow: hidden / auto
position: 不为static 、 relative均可以
display: table-cell ... 表格相关的

不过我以为用到最多的仍是

overflow : hidden

毕竟其余的position float display都是很容易影响页面布局的,咱们通常也不想为了建立BFC区域就引起页面布局的变更吧。

补充

不知道各位看了BFC的渲染规则和建立方式后,是否可以自行去解释前面的4个现象了呢?

补充2点:

关于margin的重叠规则。在现象二中,他们的重叠规则是,margin-bottom和margin-top会重叠,重叠以后取较大的margin值
关于"清除浮动"的说法。实际上"清除浮动"的说法不太准确,由于清除浮动,你直接删掉float:left就好了。更准确的说是"闭合浮动",或者说清除浮动带来的反作用。

最后，若是有什么疑问，欢迎留言讨论，若是以为真的对您对BFC的理解有帮助的话请点赞示意！谢谢。