前端面试题_01_什么是BFC_IFC_GFC_FFC

最新推荐文章于 2024-05-01 04:32:39 发布

PE7ERJ

最新推荐文章于 2024-05-01 04:32:39 发布

阅读量288

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_42162265/article/details/110257635

版权

本文介绍了CSS布局中的关键概念——格式化上下文（FC），包括Block Formatting Context（BFC）、Inline Formatting Context（IFC）、GridLayout Formatting Context（GFC）和Flex Formatting Context（FFC）。BFC用于多栏布局、清除浮动，IFC常用于水平居中，GFC是Grid布局上下文，而FFC是Flex布局上下文。文章详细阐述了各种FC的触发条件、特性和应用场景。

摘要由CSDN通过智能技术生成

1、什么是BFC、IFC、GFC、FFC？

CSS2.1中只有BFC和IFC，CSS3中才有GFC和FFC。

什么是FC？

FC全称：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC

BFC（Block Formatting Context）直译为“块级格式上下文”。Block Formatting Context就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。
那BFC一般有什么用呢？
比如常见的多栏布局，结合块级别元素浮动，里面的元素则是一个相对隔离的环境里运行。
触发BFC
只要元素满足下面任一条件即可触发BFC特性：

body根元素
浮动元素：float除none以外的值
绝对定位元素：position(absolute、flxed)
display为inline-block、table-cells、flex
overflow除了visible以外的值（hidden、auto、scroll）
BFC特性及应用
1、同一个BFC下外边距会发生折叠

<body>
    <div></div>
    <div></div>
</body>
<style>
div{
   
    width:100px;
    height:100px;
    background:lightblue;
    margin:100px
}
</style>