博客
关于我
重拾 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 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
    查看>>
    MySql 查询以逗号分隔的字符串的方法(正则)
    查看>>
    MySQL 查询优化:提速查询效率的13大秘籍(避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化)(上)
    查看>>
    mysql 查询,正数降序排序,负数升序排序
    查看>>
    MySQL 树形结构 根据指定节点 获取其下属的所有子节点(包含路径上的枝干节点和叶子节点)...
    查看>>
    mysql 死锁 Deadlock found when trying to get lock; try restarting transaction
    查看>>
    mysql 死锁(先delete 后insert)日志分析
    查看>>
    MySQL 死锁了,怎么办?
    查看>>
    MySQL 深度分页性能急剧下降,该如何优化?
    查看>>
    MySQL 深度分页性能急剧下降,该如何优化?
    查看>>
    MySQL 添加列,修改列,删除列
    查看>>
    mysql 添加索引
    查看>>
    MySQL 添加索引,删除索引及其用法
    查看>>
    MySQL 用 limit 为什么会影响性能?
    查看>>
    MySQL 用 limit 为什么会影响性能?有什么优化方案?
    查看>>
    MySQL 用户权限管理:授权、撤销、密码更新和用户删除(图文解析)
    查看>>
    mysql 用户管理和权限设置
    查看>>
    MySQL 的 varchar 水真的太深了!
    查看>>
    mysql 的GROUP_CONCAT函数的使用(group_by 如何显示分组之前的数据)
    查看>>
    MySQL 的instr函数
    查看>>