博客
关于我
重拾 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 优化器 key_mysql – 选择*和查询优化器
    查看>>
    MySQL 优化:Explain 执行计划详解
    查看>>
    Mysql 会导致锁表的语法
    查看>>
    mysql 使用sql文件恢复数据库
    查看>>
    mysql 修改默认字符集为utf8
    查看>>
    Mysql 共享锁
    查看>>
    MySQL 内核深度优化
    查看>>
    mysql 内连接、自然连接、外连接的区别
    查看>>
    mysql 写入慢优化
    查看>>
    mysql 分组统计SQL语句
    查看>>
    Mysql 分页
    查看>>
    Mysql 分页语句 Limit原理
    查看>>
    MySQL 创建新用户及授予权限的完整流程
    查看>>
    mysql 创建表,不能包含关键字values 以及 表id自增问题
    查看>>
    mysql 删除日志文件详解
    查看>>
    mysql 判断表字段是否存在,然后修改
    查看>>
    mysql 协议的退出命令包及解析
    查看>>
    mysql 取表中分组之后最新一条数据 分组最新数据 分组取最新数据 分组数据 获取每个分类的最新数据
    查看>>
    mysql 多个表关联查询查询时间长的问题
    查看>>
    mySQL 多个表求多个count
    查看>>