什么是BFC、IFC、GFC、FFC

BFC(Block Formating Context)

这里是引用
Block Formatting Context 叫做“块级格式化上下文”。BFC的布局规则如下：

哪些元素会产生BFC。

1.根元素；(body就是根元素)
2.float的属性不为none；
3.position为absolute或fixed；
4.display为inline-block，table-cell，table-caption，flex；
5.overflow不为visible，如hidden

1.内部的盒子会在垂直方向，一个个地放置；

就是块级元素默认的排放方式咯

2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上.下margin会发生重叠；

话不多说，上代码，让两个box属于不同BFC，margin方向上就不会重叠

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="p"></div>  <div class="wrap"><div class="p"></div> </div>
</body>
<style>.wrap{overflow: hidden;}
.p {  width:200px;  height:50px;  margin:50px 0;  background-color:red;  overflow: hidden;
}
</style>
</html>

3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

也是块级元素默认的排放方式咯

4.BFC的区域不会与float重叠；（直接上代码）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="aside"></div><div class="main"></div>
</body>
<style>div {  width:300px;
}
.aside {  width: 100px;  height: 150px;  float: left;  background: black;
}
.main {  height:200px;  background-color:red;  overflow: hidden;
}
</style>
</html>

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6.计算BFC的高度时，浮动元素也参与计算

解决子元素浮动引起的高度塌陷的问题！！！
父子元素都必须为BFC元素

直接上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="parent">  <div class="child"></div>  </div>
</body>
<style>.child {  border:1px solid red;  width:100px;  height:100px;  float:left;
}
.parent {  border:1px solid black;  width:300px;  overflow: hidden;
}
</style>
</html>

什么是BFC、IFC、GFC、FFC相关推荐

(37) BFC IFC GFC FFC概念
一.什么是FC? Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作 ...
BFC/IFC/GFC/FFC分别是什么？
BFC
css3中的BFC,IFC,GFC和FFC(转载)
作者原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What's FC? 一定不是KFC,FC的全称是:Formatting C ...
CSS——FC（BFC/IFC/FFC/GFC）超详细版+原理案例分析
文章目录一.Box 二.包含块 2.1 确定一个元素的包含块 2.2 EXAMPLE 三.FC(Formatting Context) 四.BFC 1. BFC的形成条件 2. BFC的布局规则 3 ...
css----BFC,IFC,GFC，FFC的区别
FC:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. BFC ...
静态补充CSS之IFC、FFC、GFC讲解
IFC简介行级格式化上下文Inline Formatting Context IFC布局规则: ①在一个行内格式化上下文中,盒是一个接一个水平放置 ②这些盒之间的水平margin,border和pa ...
CSS3与页面布局学习笔记（三）——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即"块级格式化上下文", IFC(Inline Formatting Co ...
CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法...
目录一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
合格前端系列第九弹-前端面试那些事
2019独角兽企业重金招聘Python工程师标准>>> 项目相关自我介绍:职业经历,项目经历选一个你觉得印象最深的项目讲一讲,然后会从项目里面切入到 web 基础(html/cs ...
CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins
前言盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

什么是BFC、IFC、GFC、FFC

什么是BFC、IFC、GFC、FFC相关推荐

最新文章

热门文章