css【详解】格式化上下文布局 BFC 和 IFC

FC（Formatting Context）格式化上下文—— 一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素之间的关系和相互作用。

IFC布局——行内格式化上下文

inline formatting context

触发IFC的方法

块容器盒内不包括任何块级盒，即块容器盒（html行内块级标签或块级标签）内全是行内盒（html内联标签）

IFC布局的特点

• 行内盒水平排列为一行，当容器宽度不够时就会换行
• 每一行都会生成一个行盒（见触发IFC的方法中的配图），内部包括该行所有的盒子
• 行盒的宽度由包含块和存在的浮动来决定
• 行盒的高度由内部元素中实际高度最高的元素计算出来
• 水平方向上行内盒的外边距、边框、内边距所占用的空间都会被计算，但垂直的border，padding 与 margin 都不会撑开行盒的高度
• 水平方向的对齐通过 text-align 来设置，默认对齐为left 左对齐（当所有盒的总宽度小于行盒的宽度时）
• 垂直方向的对齐通过 vertical-align 来设置，默认对齐为 baseline 基线对齐（当最高的行内盒的高度小于行盒的高度时）
• 当所有盒的总宽度超过一个行盒时，就会形成多个行盒，多个行盒相互之间垂直方向不能分离，不能重叠
• 行盒一般左右边都贴紧其包含块，但是会因为浮动盒（float 元素）的存在而发生变化。浮动盒会位于包含块边缘与行盒边缘之间，这样行盒的可用宽度就小于包含块的宽度
• 当一个行内盒超过行盒的宽度时，它会被分割成多个盒，这些盒被分布在多个行盒里。如果一个行内盒不能被分割（比如只包含单个字符，或word-breaking机制被禁用，或该行内框受white-space属性值为nowrap或pre的影响），那么这个行内盒将溢出这个行盒

BFC布局——块级格式化上下文

block formatting context
形成一块独立的渲染区域，内部元素的渲染不会影响外部元素，也不会被外部元素影响

触发BFC的方法

满足以下任意一个条件即可

• html根元素；
• float的值不为 none；
• overflow的值不为 visible （即值为auto / scroll / hidden【推荐】）
• display的值为 flex / inline-block / table-cell / table-caption
• position的值为 absolute / fixed

BFC布局的特点

• 不会发生margin重叠
• 可以清除浮动
• 实现更健壮、更智能的自适应布局

应用范例

清除浮动

    <div class="container bfc">
        <img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" class="left" style="magin-right: 10px;"/>
        <p class="bfc">某一段文字……</p>
    </div>

        .container {
            background-color: #f1f1f1;
        }
        .left {
            float: left;
        }
        .bfc {
            overflow: hidden; /* 触发元素 BFC */
        }