美文网首页
通过例子讲解BFC

通过例子讲解BFC

作者: 邢走在云端 | 来源:发表于2019-11-11 17:09 被阅读0次

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

大家可以去尝试一下

参考文档:

相关文章

  • 通过例子讲解BFC

    BFC的基本概念 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化...

  • 多列布局思路

    首先阅读:BFC与多列布局 通过BFC特性:float + BFC盒子 通过margin回拉(用到float)或绝...

  • BFC有啥用?

    BFC(Block Formatting Context)块级格式化上下文。是个什么东西呢? 在讲解BFC之前我们...

  • 布局

    两栏布局(bfc)demo 原理:BFC的区域不会与float box重叠。通过触发main生成BFC, 来实现自...

  • BFC

    原文:[布局概念] 关于CSS-BFC深入理解 面试的时候尽量不讲定义,而是讲例子。 定义 BFC全称叫做(Blo...

  • 前端通过web3调用智能合约进行逻辑交互

    本例子通过crytozombie的例子,讲解前端界面与智能合约交互的逻辑。界面一般 用HTML, JavaScri...

  • CSS: 实现两栏布局,左边固定,右边自适应的4种方法

    1. float+overflow:hidden 这种办法主要通过 overflow 触发 BFC,而 BFC 不...

  • 面试题

    1.Bfc 1、BFC是一个独立的布局环境,BFC内部的元素布局与外部互不影响;2、可以通过一些条件触发BFC,从...

  • 从例子来看BFC

    BFC 首先BFC的英文全称Block Format Context,也就是块级格式化上下文。 BFC特性 首先,...

  • css拾遗(13)-float布局案例

    用float布局实现这样一个小例子: 基本结构 效果是这样的: BFC 白色区域无法包裹住列表项是BFC的问题,在...

网友评论

      本文标题:通过例子讲解BFC

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