CSS当中的BFC

给爷整一个
102 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

CSS当中的BFC

什么叫BFC

在讨论BFC之前，我们应该先讨论下什么叫格式化上下文。页面上所有的的内容都是格式化上下文( formatting context ) 的一部分，或者是一个以特定方式显示的区域。格式化上下文包含了块级格式化上下文、灵活格式化上下文。

块级格式化上下文(BFC) 将根据块布局规则布局子元素，灵活格式化上下文将其子元素布局为灵活项flex items等。

每个格式上下文在其上下文中都有特定的布局规则，我们理解它们，以便于在实际开发当中更加灵活的使用它们。

块级格式化上下文(BFC)

  • 创建

    • html元素里面包裹的内容就是一个块级格式化作用域，我们可以通过创建html标签来添加块级格式化上下文。

    • 除了文档的根元素(html)之外,还可以将以下情况视为创建了一个BFC

      • 浮动定位的元素(float)
      • 使用了绝对定位的元素，比如position:fixed、position:sticky
      • 使用了display：inline-block
      • 表格单元格，或者使用了display:table-cell、display:table-*
      • 表格的标题使用了display:table-caption的元素
      • 块级元素的overflow属性部位visible
      • 元素属性为display:flow-root、display:flow-root list-item
      • 元素属性为contain:layout、content、strict
      • 使用了弹性布局
      • 使用了网格布局

    • 上面的这些元素创建出来的BFC的行为和html创建出来的块级格式化上下文很像，它在主布局html当中创建了以一个子布局，子布局里面的元素行为和主布句毫不相干。

  • 例子

    .box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
}
​
.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
} 

    <div class="box">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the container.</p>
</div>

    上面的html代码创建了一个box的块级元素里面有两个子元素，其中一个使用了浮动，另外一个没有脱离文本流，于是，我们可以发现，浮动元素当中的内容也会产生浮动，脱离文本流。这就是创建了一个BFC。

BFC的作用

  • 可以用来清楚浮动,使用一个BFC来包含浮动元素，浮动只会作用于BFC当中，不会影响外面。
  • 清楚外边距塌陷，在同一个BFC当中，外边距会进行折叠，这也是我们常说的外边距塌陷
  • BFC可以阻止元素被浮动元素覆盖
avatar
文章
阅读
粉丝