博客
关于我
重拾 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学习总结(28)——MySQL建表规范与常见问题
    查看>>
    Mysql学习总结(2)——Mysql超详细Window安装教程
    查看>>
    Mysql学习总结(30)——MySQL 索引详解大全
    查看>>
    Mysql学习总结(31)——MySql使用建议,尽量避免这些问题
    查看>>
    Mysql学习总结(33)——阿里云centos配置MySQL主从复制
    查看>>
    Mysql学习总结(37)——Mysql Limit 分页查询优化
    查看>>
    Mysql学习总结(38)——21条MySql性能优化经验
    查看>>
    Mysql学习总结(39)——49条MySql语句优化技巧
    查看>>
    Mysql学习总结(3)——MySql语句大全:创建、授权、查询、修改等
    查看>>
    Mysql学习总结(40)——MySql之Select用法汇总
    查看>>
    Mysql学习总结(41)——MySql数据库基本语句再体会
    查看>>
    Mysql学习总结(42)——MySql常用脚本大全
    查看>>
    Mysql学习总结(43)——MySQL主从复制详细配置
    查看>>
    Mysql学习总结(44)——Linux下如何实现mysql数据库每天自动备份定时备份
    查看>>
    Mysql学习总结(45)——Mysql视图和事务
    查看>>
    Mysql学习总结(46)——8种常被忽视的SQL错误用法
    查看>>
    Mysql学习总结(48)——MySql的日志与备份还原
    查看>>
    Mysql学习总结(49)——从开发规范、选型、拆分到减压
    查看>>
    Mysql学习总结(4)——MySql基础知识、存储引擎与常用数据类型
    查看>>
    Mysql学习总结(56)——MySQL用户管理和权限设置
    查看>>