博客
关于我
重拾 BFC、IFC、GFC、FFC
阅读量:396 次
发布时间:2019-03-05

本文共 1206 字,大约阅读时间需要 4 分钟。

从 FC 开始

FC 是 W3C CSS2.1 规范中的一个重要概念,定义页面中一块渲染区域,并决定其子元素如何定位及与其他元素的关系。常见的 FC 包括 BFC(块级格式化上下文)和 IFC(行内格式化上下文),还有 GFC(网格布局格式化上下文)和 FFC(自适应格式化上下文)。

页面中的盒子分为块盒和行内盒,不同类型的盒子参与不同的 FC。块盒参与 BFC,行内盒参与 IFC。元素的 display 属性决定了其类型,例如 display: block 创造块盒,display: inline 创造行内盒。

BFC

BFC 的布局规则如下:

  • 内部盒子垂直方向一个接一个放置,距离由 margin 决定,相邻盒子的 margin 会重叠。
  • 盒子左边缘与包含块左边缘相接,除非元素形成新的 BFC。
  • BFC 区域独立,不与 float 盒重叠。
  • 计算 BFC 高度时,浮动元素也参与。
  • BFC 的形成条件包括:

    • body 根元素
    • 浮动元素(float ≠ none)
    • 定位元素(position: absolute 或 fixed)
    • display 属性为 inline-block、table-cell、table-caption、flex、inline-flex
    • overflow 不为 visibility

    BFC 的用途:

    • 清除浮动:例如,通过设置 overflow: hidden 让父元素形成 BFC,包含浮动盒子,避免高度塌陷。
    • 自适应两栏布局:让左侧浮动元素与右侧内容在同一 BFC 内协同工作。
    • 防止垂直 margin 合并:通过包裹元素使其形成独立 BFC,阻止 margin 重叠。

    IFC

    IFC 的布局规则:

    • 盒子水平排列,起点为包含盒子的顶部。
    • 水平方向 margin、border、padding 保留。
    • 垂直方向高度由最高实际高度决定。
    • 行框的宽度由包含盒子及浮动决定,高度不受 padding 影响。
    • 行内块级元素会产生匿名块,分隔开,表现为块级排列。

    IFC 的用途:

    • 防止 p 中插入 div:通过设置 inline-block 让 div 作为行内元素。
    • 水平居中:通过 inline-block 和 text-align: center。
    • 垂直居中:通过 vertical-align: middle。

    主要影响 IFC 布局的 CSS 包括 font-size、line-height、height、vertical-align 和 text-align。

    GFC 和 FFC

    GFC:通过 display: grid 创建独立渲染区域,适用于二维表格布局。Flexbox 则通过 display: flex 创建自适应容器,提供灵活的布局控制。

    总结:FC 系统帮助开发者更好地管理页面布局,解决浮动问题、自适应布局、防止 margin 合并等复杂布局需求。

    转载地址:http://iiqzz.baihongyu.com/

    你可能感兴趣的文章
    MySQL为什么不建议使用delete删除数据?
    查看>>
    MySQL主从、环境搭建、主从配制
    查看>>
    Mysql主从不同步
    查看>>
    mysql主从同步及清除信息
    查看>>
    MySQL主从同步相关-主从多久的延迟?
    查看>>
    mysql主从同步配置方法和原理
    查看>>
    mysql主从复制 master和slave配置的参数大全
    查看>>
    MySQL主从复制几个重要的启动选项
    查看>>
    MySQL主从复制及排错
    查看>>
    mysql主从复制及故障修复
    查看>>
    MySQL主从复制的原理和实践操作
    查看>>
    webpack loader配置全流程详解
    查看>>
    mysql主从复制,读写分离,半同步复制实现
    查看>>
    MySQL主从失败 错误Got fatal error 1236解决方法
    查看>>
    MySQL主从架构与读写分离实战
    查看>>
    MySQL主从篇:死磕主从复制中数据同步原理与优化
    查看>>
    mysql主从配置
    查看>>
    MySQL之2003-Can‘t connect to MySQL server on ‘localhost‘(10038)的解决办法
    查看>>
    MySQL之CRUD
    查看>>
    MySQL之DML
    查看>>