BFC(块级格式化上下文)

最新推荐文章于 2024-08-03 17:34:58 发布

爱喝牛奶~

最新推荐文章于 2024-08-03 17:34:58 发布

阅读量3.7k

点赞数 2

文章标签： html5 jquery echarts css vue.js

本文链接：https://blog.csdn.net/qq_52301431/article/details/124203754

版权

BFC(块级格式化上下文)

BFC（Block formatting context）

直译为“块级格式化上下文”。

（1）元素的显示模式

我们之前学过元素的显示模式：display。

分为块级元素、行内元素、行内块元素。其实，display还有很多值

block-level box: display属性为block, list-item, table的元素，会生成block-level box。并且参与block fomatting context。
inline-level box: display属性为inline, inline-block, inline-table的元素，会生成inline-level box。并且参与inline formatting context

BFC是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

（2）哪些元素会生成BFC

以上盒子具有BFC的条件了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？

根元素 html
浮动元素(元素的float不是none)
绝对定位元素(元素的position为absolute或fixed)
display为inline-block、table-cell、table、inline-table、flex、grid或inline-grid
overflow值不为visible的块元素
多列容器(元素的column-count或column-width不为auto，包括column-count为1)

（3）BFC布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块的左边缘相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- 在一个bfc中，每一个盒子的左外边距应该和包含块的左边接触。这句话有两个地方值得注意
  
  第一、 bfc中的盒子应该与其自身的包含块相接触，而非与bfc盒子相接触，这个包含块有可能是bfc中的一部分，也有可能和bfc无关。
  
  第二、bfc中的盒子是与其包含块的 left edge 相接触，而不是包含块的left-border相接触。因为包含块并非一个完整的盒子，不可能有left-border。 left edge 正确的翻译为左边缘。
- 第二句翻译：即使存在浮动盒子也应该如此（如此的意思就是布局应该按照上述的规则进行），除非子盒子又形成了一个新的bfc。
  
  这句话正确的理解方式为，一个bfc中，如果存在一个浮动的盒子，而其他盒子并没有形成新的bfc，那么所有的子盒子都应该触碰到其包含块的左边缘。举个例子，一个父盒子使用overflow:hidden形成bfc，其中有个子盒子，一个浮动，另一个不浮动。那么浮动盒子会盖住不浮动盒子，但是两个盒子都会触碰到bfc的content-box。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

（4）BFC的主要用途

1. 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式。

计算BFC的高度时，自然也会检测浮动盒子的高度

<style>
    .fa {
        width: 400px;
        /* height: 400px; */
        border: 1px solid;
        /* overflow: scroll; */
        /* float: right; */
        /* display: inline-block; */
        /* display: table-cell; */
        /* position: fixed; */
        position: absolute;
    }

    .fa div {
        background-color: red;
        width: 100px;
        height: 100px;
        float: left;
    }
</style>

<div class="fa">
    <div class="son1"></div>
    <div class="son2"></div>
</div>

2. 解决外边合并问题

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠。

<div class="container">
    <div class="son1"></div>
</div>
<div class="container">
    <div class="son2"></div>
</div>

<style>
    .son1, .son2 {
        width: 300px;
        height: 300px;
    }
    .son1 {
        border: 2px solid red;
        margin-bottom: 50px;
    }
    .son2 {
        border: 2px solid green;
        margin-top: 50px;
    }
    .container {
        /* display: table; */
        /* overflow: hidden; */
        /* overflow: auto; */
        /* overflow: scroll; */
        /* position: absolute; */
        float: left;
    }
</style>

3.阻止元素被浮动元素覆盖

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。

<div class="fa">
    <div class="div1"></div>
</div>
<div class="div2"></div>

<style>
    div {
        width: 200px;
        height: 200px;
    }
    .div1 {
        background-color: blue;
        float: left;
    }
    .div2 {
        width: 240px;
        background-color: yellow;
    }
    .fa {
        /* display: inline-block; */
        /* display: table-cell; */
        /* display: table; */
        /* display: flex; */
        overflow: hidden;
    }
</style>