美文网首页
BFC块格式化上下文

BFC块格式化上下文

作者: 琉璃_xin | 来源:发表于2019-08-22 13:44 被阅读0次

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分。每个块级元素生成一个主块级盒,包含后代盒以及生成的内容。

创建方式

  • 根元素(html)
  • 浮动
  • 绝对定位(absolute 或 fixed)
  • 行内块元素(inline-block
  • 表格单元格(table-cell,HTML表格单元格默认为该值)
  • 表格标题(table-caption,HTML表格标题默认为该值)
  • overflow值不为 visible 的块元素
  • display值为flow-root的元素

特征表现

  • 外边距折叠只会发生在属于同一BFC的块级元素之间。
  • 浮动不会影响其它BFC中元素的布局。
  • 清除浮动只能清除同一BFC中在它前面的元素的浮动。
  • BFC会包裹其中所有元素,包括浮动元素等

实际应用

  1. 让浮动内容与周围内容等高(清除浮动)
浮动
  <div class="box">
    <div class="fl">i am a floated box</div>
    <p>i am content inside the container</p>
  </div>
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
}

.fl {
  float: left;
  width: 200px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

由于浮动脱离了文档流导致<div> 的 background 和 border 仅仅包含了内容,不包含整个浮动。
创建一个会包含这个浮动的BFC就可以清除子元素浮动,通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。

    .box {
      background-color: rgb(224, 206, 247);
      border: 5px solid rebeccapurple;
      overflow: hidden;
    }
  1. 避免外边距塌陷


    外边距塌陷
    .blue,
    .red-inner {
      height: 50px;
      margin: 10px 0;
    }

    .blue {
      background: blue;
    }
    .red-inner{
      background: red;
    }
  <div class="blue"></div>
  <div class="red-inner">red inner</div>

根据BFC特性可以知道,可以再创建一个BFC,让blue和red不在同一个BFC中即可避免。


BFC避免
    .blue,
    .red-inner {
      height: 50px;
      margin: 10px 0;
    }

    .blue {
      background: blue;
    }
    .red-inner{
      background: red;
    }
    .red-outer {
      overflow: hidden;
    }
  <div class="blue"></div>
  <div class="red-outer">
    <div class="red-inner">red inner</div>
  </div>
  1. 左侧固定,右侧自适应两栏布局
    .aside {
      width: 100px;
      height: 150px;
      float: left;
      background: #f66;
    }

    .text {
      height: 200px;
      background: #fcc;
    }

    .main {
      overflow: auto;
    }
  <div class="wrap">
    <div class="aside"></div>
    <div class="main">
      <div class="text"></div>
    </div>
  </div>
image.png

这里就利用了不和浮动元素重叠的特性。

相关文章

  • CSS知识点----BFC

    BFC(块级格式化上下文) 块格式化上下文(Block Formatting Context,BFC) 是Web页...

  • BFC / IFC

    BFC(Block Formatting Context)块级格式化上下文 定义:一个块格式化上下文 ( BFC ...

  • BFC和IFC

    BFC 块级格式化上下文 哪些元素会生产BFC? IFC 行内格式化上下文

  • BFC和IFC

    BFC 块级格式化上下文 IFC 行内格式化上下文

  • css-BFC

    BFC(block formatting context):块格式化上下文 理解BFC BFC和堆叠上下文都没有定...

  • BEM 和 BFC

    BFC 1 定义: BFC - Block Formatting Context 块级格式化上下文 BFC的定义,...

  • BFC

    什么是BFC BFC 即 Block Formatting Contexts (块级格式化上下文) 具有 BFC ...

  • CSS清除浮动的方法

    BFC CSS中的BFC BFC:block formatting context块级格式化上下文; BFC 与清...

  • CSS中的BFC及其作用

    BFC是什么BFC 全称为 块格式化上下文 (Block Formatting Context) ,BFC是一个块...

  • css

    描述BFC(块格式化上下文)及其工作原理。 BFC 即 Block Formatting Contexts (块级...

网友评论

      本文标题:BFC块格式化上下文

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