BFC 和 IFC

BFC 和 IFC

BFC - Block formatting context

简介

BFC(Block Formatting Context)直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,Block Formatting Context 提供了一个环境,HTML 元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。

何时触发 BFC

  • <html>
  • float 属性不为 none
  • position 属性是 absolutefixed
  • overflow 属性不为 visible
  • display 属性为 inline-block
  • display 属性为 table-celltable-captiontabletable-row 等表格元素
  • display 属性为 flow-root
  • display 属性为 flexinline-flex
  • display 属性为 gridinline-grid
  • column-countcolumn-width 属性不为 auto
  • column-span 属性为 all

BFC 作用

消除外边距重叠

发生外边距重叠
<body>
    <div style="margin-bottom: 100px"></div>
    <div style="margin-top: 100px"></div>
</body>
分别放在不同的 BFC 容器中
<div style="overflow: hidden;">
    <p style="margin-bottom: 100px;"></p>
</div>
<div style="overflow: hidden;">
    <p style="margin-top: 100px;"></p>
</div>

包含浮动的元素

包含 float 孩子,容器高度变窄
<div style="border: 1px solid #000;">
    <div style="width: 100px; height: 100px; float: left;"></div>
</div>
触发容器的 BFC,正常计算高度
<div style="border: 1px solid #000; overflow: hidden">
    <div style="width: 100px; height: 100px; float: left;"></div>
</div>

阻止元素被浮动元素覆盖

div B 被 float div A 覆盖
<div class="A" style="float: left"></div>
<div class="B"></div>
触发容器的 BFC
<div class="A" style="float: left"></div>
<div class="B" style="overflow: hidden"></div>

IFC - Inline formatting context

什么时候触发 IFC

当一个 block 容器只包含 inline 元素的时候就会触发 IFC

IFC 布局规则

只计算横向样式,忽略纵向

如下示例,margin-topmargin-bottom 未生效:

.warp { border: 1px solid red; display: inline-block; }
.text { margin: 20px; background: green; }
<div class="warp">
    <span class="text">文本一</span>
    <span class="text">文本二</span>
</div>

水平排列依赖容器的 text-align

容器的 text-align 属性是 center,那么容器内部的多个元素就会居中的方式进行排列。

.warp { border: 1px solid red; width: 200px; text-align: center; }
.text { background: green; }
<div class="warp">
    <span class="text">文本一</span>
    <span class="text">文本二</span>
</div>