博客
关于我
重拾 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/

    你可能感兴趣的文章
    MongoDB出现Error parsing command line: unrecognised option ‘--fork‘ 的解决方法
    查看>>
    MongoDB学习笔记(8)--索引及优化索引
    查看>>
    ms sql server 2008 sp2更新异常
    查看>>
    MS UC 2013-0-Prepare Tool
    查看>>
    msbuild发布web应用程序
    查看>>
    MSCRM调用外部JS文件
    查看>>
    MSEdgeDriver (Chromium) 不适用于版本 >= 79.0.313 (Canary)
    查看>>
    msf
    查看>>
    MSSQL数据库查询优化(一)
    查看>>
    MSSQL日期格式转换函数(使用CONVERT)
    查看>>
    MSTP多生成树协议(第二课)
    查看>>
    MSTP是什么?有哪些专有名词?
    查看>>
    Mstsc 远程桌面链接 And 网络映射
    查看>>
    Myeclipse常用快捷键
    查看>>
    MyEclipse用(JDBC)连接SQL出现的问题~
    查看>>
    myeclipse的新建severlet不见解决方法
    查看>>
    MyEclipse设置当前行背景颜色、选中单词前景色、背景色
    查看>>
    MyEclipse配置SVN
    查看>>
    MTCNN 人脸检测
    查看>>
    MyEcplise中SpringBoot怎样定制启动banner?
    查看>>