IFC and BFC
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的更多相关文章
- CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
- 重新认识Box Model、IFC、BFC和Collapsing margins
尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...
- 盒子模型、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习 ...
- CSS中的IFC和BFC入门
CSS中的IFC和BFC入门 提到CSS,首先会想到的就是盒模型,如果对于盒模型不是很理解的,看这里.这是一个基础的系列,看了盒模型还可以看看box-sizing,好了不多说了,下面介绍今天的重点 ...
- css IFC 与 BFC分析
在我们做的网页上通常最重要的其中一点就是美观度,bfc他是一个块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局, ...
- 初识 BFC、 IFC、GFC、FFC
首先本文中介绍的 BFC. IFC.GFC.FFC 均为 CSS 中常见问题的解读,如没兴趣,可以绕道了. 然后在介绍这么多的 *FC 之前,我们得了解 一下 Box 和 Formatting Con ...
- 重拾 BFC、IFC、GFC、FFC
温故知新,巩固基础 从 FC 开始 FC,Formatting Context,格式化上下文,是 W3C CSS2.1 规范中的一个概念,定义的是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元 ...
- Block formatting context & Inline formatting context(BFC&IFC)的区别(转载)
何为BFC与IFC bfc与ifc是针对页面正常流的两种环境,块级元素处于bfc环境中,行内元素处于ifc环境中. 元素是块级元素or行内元素由其display属性决定: block, table, ...
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
随机推荐
- [bzoj3196][tyvj1728]普通平衡树
真是太差了,到现在才打出一个平衡树的板子.. 感谢blackjack大佬提供的数组版treap板子!!基本完全照搬,blackjack太神啦! 但目前我只会这几个最基本的操作(说白了STL的(mult ...
- Spring---资源访问工具类
JDK所提供的访问资源的类并不能很好的满足各种底层资源的访问需求,因此,Spring设计了一个Resource接口,它为应用提供了更强大的访问底层资源的能力 主要方法 boolean exists() ...
- android的dmtracedump工具生成trace文件图片 'dot' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
http://jingyan.baidu.com/article/c910274bfa6c1fcd361d2df7.html http://www.cnblogs.com/albert1017/p/3 ...
- MySQL添加和删除字段
查询表的字段类型: mysql> desc t_template_title; +----------------+--------------+------+-----+---------+- ...
- Centos在VMware虚拟机上的网络配置一记
症状:配置好了IP, ping 127.0.0.1 ok ping 10.0.0.1 ok ping 外网IP,域名 network is unreachable ------- ...
- 项目中DataTables分页插件的使用
在项目开发的过程中,一般都会对表格进行分页处理,大多是情况下会在项目中配置好后台分页插件,提高效率,减轻浏览器的压力.但是有时会遇到有些数据不能直接通过分页插件操作数据库进行分页数据查询,那就需要用到 ...
- 孤荷凌寒自学python第三十天python的datetime.datetime模块
孤荷凌寒自学python第三十天python的datetime.datetime模块 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) datetime.datetime模块包含了:datet ...
- HDU 3856 Palindrome ( Manacher + RMQ + 二分 ) WA!!!
不知道错在哪了,求大神指教!!! 思路:用manacher求出每个以str[i]为中心轴的回文串的长度,RMQ预处理区间最大值,对于每个查询,二分最大回文串长,判定是否可行. #include < ...
- 【bzoj1899】[Zjoi2004]Lunch 午餐 dp
题目描述 上午的训练结束了,THU ACM小组集体去吃午餐,他们一行N人来到了著名的十食堂.这里有两个打饭的窗口,每个窗口同一时刻只能给一个人打饭.由于每个人的口味(以及胃口)不同,所以他们要吃的菜各 ...
- UVA1316 Supermarket
题目描述 有一个商店有许多批货,每一批货又有N(0<=N<= 10^4104 )个商品,同时每一样商品都有收益 P_iPi ,和过期时间 D_iDi (1<= Pi,DiPi,D ...