css布局中的各种FC(BFC、IFC、GFC、FFC)

时间:2023-01-09 08:39:37

什么是FC?
FC(Formatting Context)格式化上下文,其实指的是一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素之间的关系和相互作用。

什么是BFC?

BFC(Block Formatting Context)块级格式化上下文,指的是一个独立的块级渲染区域,拥有一套独立的渲染规则,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。
BFC的约束规则:

  1、内部的BOX会在垂直方向一个接一个的排列着;

  2、属于同一个BFC的两个相邻BOX的margin会发生重叠;

  3、每个元素的左边距与包含块的左边相接触,即使浮动元素也是如此(position: absolute会超出包含块的边界);

  4、BFC区域不会和float区域重叠;

  5、计算BFC的时候,浮动子元素的高度也会计算在内;

  6、BFC是一个独立的渲染区域,其容器内的元素不会影响到容器外的元素,反之亦然;
怎么生成BFC:

  1、float不为none;

  2、overflow不为visible;

  3、display的值为: inline-block, table-cell, table-caption;

  4、position的值为absolute, fixed;
BFC应用:

  1、防止margin重叠;

  2、防止发生因浮动而产生的高度塌陷问题;

  3、可以用于两栏布局;

什么是IFC?

css布局中的各种FC(BFC、IFC、GFC、FFC)的更多相关文章

  1. BFC,IFC,GFC,FFC

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

  2. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

  3. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  4. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  5. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  6. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  7. DIV&plus;CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  8. CSS布局中最小高度的妙用

    CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...

  9. CSS布局中一个简单的应用BFC的例子

    什么是BFC BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子 ...

随机推荐

  1. GitHub项目大全

    [微信网页版]: [查看被删的微信好友]https://github.com/0x5e/wechat-deleted-friends [网页版微信API,包含终端版微信及微信机器人]https://g ...

  2. android res文件夹下面的 values-v11 、 values-v14

    values-v11代表在API 11+的设备上,用该目录下的styles.xml代替res/values/styles.xml values-v14代表在API 14+的设备上,用该目录下的styl ...

  3. 【一段日子荟萃】where should I go&period;

    当<UNIX环境高级编程>和<鸟哥的私房菜>到我的桌头的时候,我忽然产生了厌倦的心. NO,我不是想做这个,我不是想学习这个操作系统的结构和接口. 我想些一个操作系统,更一般的 ...

  4. Java中Properties类的学习总结

    学习目标: 1.认识properties文件,理解其含义,会正确创建properties文件. 2.会使用java.util.Properties类来操作properties文件. 一.认识prope ...

  5. http的get与post方式下的getParameter获取中文

    客户端提交某个中文参数,比如a=中国 (1)如果以GET方式提交,在地址栏中,可以看到参数进行了URL ENCODE,形如:a=%E4%B8%AD%E5%9B%BD.服务端接收到请求,使用reques ...

  6. leetcode&lowbar;question&lowbar;73 Set Matrix Zeroes

    Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. Follow ...

  7. WMI 获取硬件信息的封装函数与获取联想台式机的出厂编号方法

    原文:WMI 获取硬件信息的封装函数与获取联想台式机的出厂编号方法 今天玩了一把WMI,查询了一下电脑的硬件信息,感觉很多代码都是可以提取出来的,就自己把那些公共部分提出出来,以后如果要获取 某部分的 ...

  8. Python optparser库详解

    一直以来对optparser不是特别的理解,今天就狠下心,静下心研究了一下这个库.当然了,不敢说理解的很到位,但是足以应付正常的使用了.废话不多说,开始今天的分享吧. 简介 optparse模块主要用 ...

  9. IDEA的Tomcat的几个坑。

    IDEA乱码的解决. Tomcat配置完成后打开IDEA可能会出现控制台乱码,如下. 解决方法如下: 首先设置Tomcat在配置项VM options文本框中输入-Dfile.encoding=UTF ...

  10. Shell命令-文件及内容处理之wc,tr

    文件及内容处理 - wc.tr 1. wc:统计文件的行数.单词数或字节数 wc命令的功能说明 wc 命令用于计算字数.利用 wc 指令我们可以计算文件的字节数,字数,或是列数,若不指定文件名称,或是 ...