美文网首页
BFC 块级格式化上下文

BFC 块级格式化上下文

作者: 攻城狮_前端程序媛 | 来源:发表于2022-07-10 16:27 被阅读0次

    在解释BFC之前,我们需要了解一下我们常说的HTML的文档流。

    文档流

    文档流,其实就是指BFC中的FC,FC(Formatting Context),格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。

    其实文档流根据元素在排版中的定位类型分为三种,分别为:

    • 标准流
    • 浮动流
    • 定位流
    1. 标准流

    也叫普通流,就是我们常说的文档流,指的是HTML中元素在计算布局排版的过程中,所有处于文档流中的元素会自动的从左到右(非块级元素),从上到下(块级元素)的排列规则。

    标准流文档布局.png
    2. 浮动流

    使用float使元素脱离了标准的文档流,会导致其他处于文档流中的盒子在计算布局排版时环绕在它的周边,需要时可以设置 clear 属性来清除浮动。

    注意: 浮动会使元素脱离文档流,但是不会脱离文本流,在其他盒子的文本内容在计算布局时,浮动元素还是占位置的。

    文本流:指的是元素内部的一系列的字符的排列规则。

    我们可以看到p2,p3元素在计算布局位置的时候,无视了开启浮动的p1元素的位置,从body元素的最左边开始布局,而他们内部的文本却并没有无视p1元素的位置。

    浮动流布局.png
    1. 定位流(position: absolute或fixed)

    注意:使用定位会同时使元素脱离标准的文档流和文本流,在其他盒子的文本内容在计算布局时,定位元素不占位置

    • 对于position: absolute,元素定位将相对于上级元素中最近的一个使用了relative、fixed、absolute的元素,如果没有则相对于body;
    • 对于position:fixed,元素的定位则是相对于浏览器窗口;
    定位流布局.png

    脱离文档流:指的是元素脱离正常元素的布局排版规则,其他处于文档流中的盒子在计算布局排版时,会自动无视已脱离文档流的元素来进行定位。

    BFC(Block Formatting Context)块级格式化上下文

    BFC是用于布局块级盒子的一块渲染区域,你可以将一个 BFC 可以理解为一个容器,里面的元素不会影响到容器外的布局;

    可以简单理解为一个元素的内部子元素无论尺寸、定位如何变化,都不会影响外部元素的定位和尺寸

    注意:一个BFC的范围包含其容器内的所有子元素,但不包含其子元素的下级元素

    形成BFC常见条件:
    • 根元素,也就是 HTML 元素
    • 浮动元素,即float不是none
    • 定位元素,position是absolute或者fixed
    • overflow不是visible的元素,如overflow:hidden
    • 行内块元素(displayinline-block
    • display值为 table、flex、grid
    BFC的作用
    1. 清除浮动
      -- 一个标准的文档流的块级元素可能被一个float元素覆盖,挤占正常的文档流,设置BFC这可以避免这种问题

    2. 阻止相邻元素的上下margin合并

    3. 用于解决容器元素高度塌陷问题

    <style>
      #div1, #div3 {
        width: 100px;
        height: 100px;
        background: red;
        margin-top: 20px;
        margin-bottom: 20px;  
      }
    <style>
    
    没有使用BFC的布局.png

    如果想避免这种情况,可以给这两个 div 裹上一个 BFC。

    <style>
      .box {
         overflow: hidden;
      }
    </style>
    
    <div class="box">
       <div id="div1"></div>
    </div>
    <div class="box">
        <div id="div3"></div>
     </div>
    
    使用BFC后的布局.png

    浮动元素脱离了正常的文档流,一般情况下,计算容器元素的高度时,是不会考虑浮动元素的高度,则会导致容器元素的内部塌陷;
    但是当容器元素就使用了 BFC,则不会一起塌下,容器元素的高度会根据子元素的高度自动撑开。

    <style>
      .container {
        /* overflow: hidden; */
        padding: 5px;
        border: 1px solid #000;
      }
      .box {
        float: left;
        width: 100px;
        height: 100px;
        background-color: cornflowerblue;
      }
    </style>
    
    <div class="container">
      <div class="box"></div>
    </div>
    
    高度塌陷问题解决.png

    相关文章

      网友评论

          本文标题:BFC 块级格式化上下文

          本文链接:https://www.haomeiwen.com/subject/ngsnbrtx.html