通过例子讲解BFC

更新于 2019-11-18  约 8 分钟

BFC的基本概念

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。 ——来自MDN

如何创建BFC

下列方式会创建块格式化上下文
  • 根元素(<html>)
  • 浮动元素(元素的 float 不是 none
  • 绝对定位元素(元素的 positionabsolutefixed
  • 行内块元素(元素的 displayinline-block
  • 表格单元格(元素的 displaytable-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 displaytable-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 displaytable、`table-rowtable-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table`)
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素 , 可以创建无副作用的BFC(火狐53+,chrome58+,opera45+支持)
  • contain 值为 layoutcontent或 paint 的元素
  • 弹性元素(displayflexinline-flex元素的直接子元素)
  • 网格元素(displaygridinline-grid 元素的直接子元素)
  • 多列容器(元素的 column-countcolumn-width 不为 auto,包括 `column-count1`)
  • column-spanall 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更Chrome bug)。

BFC的使用场景(通过例子讲解)

  • 清除浮动

    css

    .box {
        border: 1px solid #f00;
        // 触发BFC, 以下任意一种
        overflow: hidden;
        /* overflow: auto; */
        /* position: absolute; */
        /* position: fixed; */
        /* display: table; */
        /* display: flex; */
    }
    
    .fl {
        float: left;
        width: 50px;
        height: 50px;
        background: #0f0;
        margin: 5px;
    }

    html

    <div class="box">
        <div class="fl"></div>
        <div class="fl"></div>
        <div class="fl"></div>
    </div>
    效果展示

    BFC清除浮动

  • 解决外边距塌陷

    创建新的BFC避免两个相邻 <div> 之间的 外边距合并 问题

    下面代码:

    三个p标签,距离上方15px, 下方20px
    p {
      margin: 15px auto 20px;
      background: #f00;
    }

    html

    <div class="bfc-container">
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </div>
    效果展示

    边距重叠)

    两个p标签之间的高度为20px, 并不是 20+15 = 45 px, 这就是边距重叠,选择最大的一个边距,及20px

    解决方法就是给p标签一个父元素,并创建BFC

    css

    p {
        margin: 15px auto 20px;
        background: #f00;
    }

    html

    <p>1</p>
    <div style="overflow: hidden;">
        <p>2</p>
    </div>
    <p>3</p>

    给中间的p标签的父级元素添加BFC

    这时候,中间的元素边距不会发生重叠,此时的间距就是 45px

    大家可以去尝试一下

参考文档:

阅读 133更新于 2019-11-18

推荐阅读
前端学习
用户专栏

个人学习专栏,记录自己的前端学习

11 人关注
40 篇文章
专栏主页
目录