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)即行内格 ...
随机推荐
- salt demo 环境
demo 环境 安装 virtualBox和vagrant 安装工具包:virtualBox, vagrant 下载 https://github.com/UtahDave/salt-vagrant- ...
- PHP.32-TP框架商城应用实例-后台8-商品相册-添加
商品相册[是商品的其他相片] 添加相册需求: 每张图片生成三张缩略图{50*50.350*350.650*650} 1.建表p39_goods_pic{id,pic,sm_pic,mid_pic,bi ...
- 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 ...
- python 10月30日复习
1.把一个数字的list从小到大排序,然后写入文件,然后从文件中读取出来文件内容,然后反序,在追加到文件的下一行中 import codecs list1 = [2,23,8,54,86,12] li ...
- Oracle exp,imp,expdp,impdp数据导入导出
一.导出模式(三种模式)及命令格式 1. 全库模式 exp 用户名/密码@网络服务名 full=y file=路径\文件名.dmp log=路径\文件名.log 2. 用户模式(一般情况下采用此模式) ...
- 用swoole实现nginx日志解析
1.原技术路线解析 在nging配置中将日志信息交给syslog处理,rsyslog配置中将数据传递给了514端口解析,然后将解析好的数据传入elasticsearch中. nginx配置 serve ...
- shell编程——参数传递
1.Linux Shell参数引用 $0 这个程式的执行名字$n 这个程式的第n个参数值,n=1..9$* 这个程式的所有参数$# 这个程式的参数个数$$ 这个程式的PID$! 执行上一个背景指令的P ...
- USACO Section2.1 Hamming Codes 解题报告 【icedream61】
hamming解题报告----------------------------------------------------------------------------------------- ...
- springboot示例参考网站
https://blog.csdn.net/u013248535/article/details/55100979/
- IOS与Unity交互
学习了宣雨松的两篇Unity和IOS交互的文章,自己动手做了下,遇到了些问题,在此记录 先说IOS发送消息给Unity:(文章地址:http://www.xuanyusong.com/archives ...