likes
comments
collection
share

🔥🔥🔥深入理解BFC容器(Block Formatting Content)——块级格式化上下文🔥🔥🔥

作者站长头像
站长
· 阅读数 40

序言

在上一篇文章我们了解了JS中浮动元素的用处、它的优缺点,以及清除浮动的各种方法,但是目前最常用的清除浮动的方法是BFC(Block Formatting Content)—— 块级格式化上下文

在JavaScript中,BFC(块级格式化上下文)是一种重要的布局概念,它能够帮助我们更好地控制和规范网页元素的排列和显示。在本文中,我们将讨论BFC容器的BFC的特点以及可以创建它的属性。

一、 BFC的特点

BFC容器具有一些重要的特点,它们对于网页布局和解决一些常见问题非常有帮助:

  1. BFC容器计算高度时包括浮动元素:一个BFC容器会将其内部的浮动元素的高度也计算在内,这有助于防止父元素塌陷并正确地包裹浮动元素。这是BFC的一个重要特性,尤其在处理浮动元素时非常有用。

  2. 解决内外margin重叠问题:BFC容器还可以用来解决内外margin重叠问题。当两个相邻元素的margin相遇时,它们的margin会合并,导致间距不如预期。但在BFC容器内部,margin不会合并,可以更精确地控制元素之间的间距。

那么现在就让我们开始了解BFC是如何解决这些问题的

二、 创建BFC的属性

1. display: inline-block

元素未创建BFC时的效果如下

ul li{
      list-style: none;
      width: 200px;
      height: 100px;
      float: left;
    }
    li:nth-child(1) {
      background: #da8383;
    }
    li:nth-child(2) {
      background: #e1e941;
    }
    li:nth-child(3) {
      background: #6ceb50;
    }
    .text{
      width: 100px;
      height: 150px;
      background: #2d3bda;
    }
<div class="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div class="text">Hello World</div>
  </div>

🔥🔥🔥深入理解BFC容器(Block Formatting Content)——块级格式化上下文🔥🔥🔥 元素创建BFC时的效果如下

ul{
      display: inline-block;
    }

🔥🔥🔥深入理解BFC容器(Block Formatting Content)——块级格式化上下文🔥🔥🔥

2. display: table-cell

ul{
      display: table-cell;
    }

🔥🔥🔥深入理解BFC容器(Block Formatting Content)——块级格式化上下文🔥🔥🔥

3. overflow: hidden || auto || overlay || scroll

  1. overflow: hidden:当内容溢出容器的边界时,多余的内容将被隐藏,不可见。这意味着不会显示滚动条,也不会提供任何滚动功能。
  2. overflow: auto:如果内容溢出容器的边界,滚动条会出现,允许用户滚动查看被隐藏的内容。如果内容未溢出,滚动条将自动隐藏。
  3. overflow: overlay:这是一个相对较新的值,它与auto类似,但在某些情况下会显示一个轻量级的滚动条,而不是传统的滚动条。它的行为可能会因浏览器的不同而有所变化。
  4. overflow: scroll:无论内容是否溢出,始终显示滚动条,允许用户滚动内容。即使内容未溢出,也会显示滚动条,但会被禁用。
ul{
        /* overflow: hidden; BFC容器 */
        /* overflow: auto; BFC容器 */
        /* overflow: overlay; BFC容器 */
         overflow: scroll; 
    }

🔥🔥🔥深入理解BFC容器(Block Formatting Content)——块级格式化上下文🔥🔥🔥

4. 弹性盒子(display : flex || inline-flex)

弹性盒子也是一种创建BFC容器的方法使用display: flex属性可以将元素变成一个块级弹性容器,而display: inline-flex属性则将元素变成一个内联弹性容器。

ul{
      /* display: flex; */
      display: inline-flex;
    }

🔥🔥🔥深入理解BFC容器(Block Formatting Content)——块级格式化上下文🔥🔥🔥

5. 解决内外margin重叠问题

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100%;
            height: 600px;
            background: red;
        }
        .box{
            width: 100%;
            height: 300px;
            background: rgb(58, 10, 251);
        }
    </style>
<div class="wrap">
        <div class="box"></div>
    </div>

代码运行结果为

🔥🔥🔥深入理解BFC容器(Block Formatting Content)——块级格式化上下文🔥🔥🔥

当我们给父容器设置margin-top: 100px; 子容器可想而知会随父容器往下移

.wrap{
            width: 100%;
            height: 600px;
            background: red;
            margin-top: 100px
        }

🔥🔥🔥深入理解BFC容器(Block Formatting Content)——块级格式化上下文🔥🔥🔥

这个时候我们想让子容器往上移,于是给box设置margin-top: 50px;按理来说子容器会相对父容器往下移

.box{
            width: 100%;
            height: 300px;
            background: rgb(58, 10, 251);
            margin-top: 50px;
        }

代码运行结果是

🔥🔥🔥深入理解BFC容器(Block Formatting Content)——块级格式化上下文🔥🔥🔥

可以看到运行结果和之前是没有变化的,说明父容器与子容器的margin合并了,导致结果不如预期,我们通常使用overflow: auto来为父容器创建BFC来解决此问题

.wrap{
            width: 100%;
            height: 600px;
            background: red;
            margin-top: 100px
            overflow: auto
        }

BFC后的运行结果为

🔥🔥🔥深入理解BFC容器(Block Formatting Content)——块级格式化上下文🔥🔥🔥

如此看来这样我们margin边距的问题就得到了解决

总结

# BFC 容器 Block Formatting Content  块级格式化上下文

- 哪些属性可以触发BFC:

1. float: left || right

2. position: absolute || fixed

- 哪些属性可以创建BFC:

3. display: inline-block

4. display: table-cell ....

5. overflow: hidden || auto || overly || scroll

6. 弹性盒子 (display : flex || inline-flex)

- BFC的特点:

1. bfc容器在计算高度时,会将浮动元素的高度也计算在内

2. 用来解决内外margin重叠问题

感谢大家的阅读,点点赞吧♥

如果想了解更多有用的干货,点赞+收藏第一时间获取有用的小知识

转载自:https://juejin.cn/post/7296111218720522275
评论
请登录