BFC  and  IFC
1,IFC -- 针对行内元素 -- 行内格式上下文
BFC --针对块级元素 -- 块级格式上下文
2,IFC特点:
行框的高度由包含元素的高度和有没有float元素决定。
通常,行框的左边距接触到包含快的左边,右边距接触到包含块的右边
浮动元素可能会处于包含块边缘与行框边缘之间 -- 缩短了可用宽度
3,BFC特点:
独立的区域,与外部毫不相干
BFC布局规则:
1,)内部的box会在垂直方向一个接一个的防放置
2,)box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会重叠
3,)每个元素的左边与包含快的border box 左边相邻,及时浮动也如此
4,)BFC的区域不会与float box重叠
5,)BFC就是页面上的独立容器,不会影响外面的元素
6,)计算BFC高度是=时,浮动元素也计算
BFC的作用:一是自适应两栏布局
二是清除内部的浮动
三是放置margin重叠
4,哪些会出发 BFC ?
有五个:1,根元素
2,float不为none
3,position为absolute或fixed
4,display 为inline-block、table-cell、table-caption、flex inline-flex
5,overflow不为visible -- 通常用这个,因为这个对整体的影响最小
6,border有时也会触发
5,之间的转换:BFC需要出发,IFC不需要转换,可将IFC转换为BFC

IFC and BFC的更多相关文章

  1. CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

  2. 重新认识Box Model、IFC、BFC和Collapsing margins

    尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...

  3. 盒子模型、IFC、BFC和Collapsing margins

    前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习 ...

  4. CSS中的IFC和BFC入门

    CSS中的IFC和BFC入门   提到CSS,首先会想到的就是盒模型,如果对于盒模型不是很理解的,看这里.这是一个基础的系列,看了盒模型还可以看看box-sizing,好了不多说了,下面介绍今天的重点 ...

  5. css IFC 与 BFC分析

    在我们做的网页上通常最重要的其中一点就是美观度,bfc他是一个块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局, ...

  6. 初识 BFC、 IFC、GFC、FFC

    首先本文中介绍的 BFC. IFC.GFC.FFC 均为 CSS 中常见问题的解读,如没兴趣,可以绕道了. 然后在介绍这么多的 *FC 之前,我们得了解 一下 Box 和 Formatting Con ...

  7. 重拾 BFC、IFC、GFC、FFC

    温故知新,巩固基础 从 FC 开始 FC,Formatting Context,格式化上下文,是 W3C CSS2.1 规范中的一个概念,定义的是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元 ...

  8. Block formatting context & Inline formatting context(BFC&IFC)的区别(转载)

    何为BFC与IFC bfc与ifc是针对页面正常流的两种环境,块级元素处于bfc环境中,行内元素处于ifc环境中. 元素是块级元素or行内元素由其display属性决定: block, table, ...

  9. CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

随机推荐

  1. salt demo 环境

    demo 环境 安装 virtualBox和vagrant 安装工具包:virtualBox, vagrant 下载 https://github.com/UtahDave/salt-vagrant- ...

  2. PHP.32-TP框架商城应用实例-后台8-商品相册-添加

    商品相册[是商品的其他相片] 添加相册需求: 每张图片生成三张缩略图{50*50.350*350.650*650} 1.建表p39_goods_pic{id,pic,sm_pic,mid_pic,bi ...

  3. SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID

    如题: SDK location not found. Define location with sdk.dir in the local.properties file or with an AND ...

  4. python 10月30日复习

    1.把一个数字的list从小到大排序,然后写入文件,然后从文件中读取出来文件内容,然后反序,在追加到文件的下一行中 import codecs list1 = [2,23,8,54,86,12] li ...

  5. Oracle exp,imp,expdp,impdp数据导入导出

    一.导出模式(三种模式)及命令格式 1. 全库模式 exp 用户名/密码@网络服务名 full=y file=路径\文件名.dmp log=路径\文件名.log 2. 用户模式(一般情况下采用此模式) ...

  6. 用swoole实现nginx日志解析

    1.原技术路线解析 在nging配置中将日志信息交给syslog处理,rsyslog配置中将数据传递给了514端口解析,然后将解析好的数据传入elasticsearch中. nginx配置 serve ...

  7. shell编程——参数传递

    1.Linux Shell参数引用 $0 这个程式的执行名字$n 这个程式的第n个参数值,n=1..9$* 这个程式的所有参数$# 这个程式的参数个数$$ 这个程式的PID$! 执行上一个背景指令的P ...

  8. USACO Section2.1 Hamming Codes 解题报告 【icedream61】

    hamming解题报告----------------------------------------------------------------------------------------- ...

  9. springboot示例参考网站

    https://blog.csdn.net/u013248535/article/details/55100979/

  10. IOS与Unity交互

    学习了宣雨松的两篇Unity和IOS交互的文章,自己动手做了下,遇到了些问题,在此记录 先说IOS发送消息给Unity:(文章地址:http://www.xuanyusong.com/archives ...