深入理解BFC与IFC
一、盒子模型
要理解BFC与IFC,首先要理解盒子模型,盒模型的结构如下:
从内到外依次为 content -> padding -> border -> margin
常见的盒模型氛围两种:标准盒模型和IE盒模型,我们可以用 box-sizing 属性进行切换
标准盒模型: box-sizing: content-box;
IE盒模型:box-sizing: border-box;
二、Box
一个页面是由很多html元素组成的,而这些元素都是一个接一个盒子堆叠起来的。下面以百度首页为例
浏览器控制台执行一下命令即可查看页面 box 的区块(红色线框)
[].forEach.call(document.querySelectorAll('*'), function(a){a.style.outline = "1px solid red";})
三、什么是BFC与IFC
1. BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格式化上下文。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内的元素产生作用。
2. BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围
3. 在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 block ,或者是 inline ,但不能同时属于这两者。并且, Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化, Inline boxes(块内框) 则在 Inline Formatting Context(行内格式化上下文) 里格式化
四、如何产生BFC
当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Context:
1. float的值不为none
2. overflow的值不为visible
3. display的值为table-cell, table-caption, inline-block中的任何一个
4. position的值不为relative和static
CSS3触发BFC方式则可以简单描述为:在元素定位非static,relative的情况下触发,float也是一种定位方式
五、BFC的作用与特点
不和浮动元素重叠,清除外部浮动,阻止浮动元素覆盖
注:下图盒子设置 margin:100px; 同一个BFC外边距会重叠
六、BFC 布局规则
1.内部的 box 会在垂直方向,一个接一个地放置。
2. box 垂直方向由 Margin 决定,属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠。
3. 每个元素的 margin box 的左边,与包含块 border box 的左边相接触。
4. BFC 的区域不会与 float box 重叠。
5. BFC 就是页面上的一个隔离容器,容器里的子元素不会影响外面的元素。
6. 计算 BFC 的高度时,浮动元素也参与计算。
如果一个浮动元素后面跟着一个非浮动的元素,那么就会产生一个重叠的现象。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态,当float不为none时,position为absolute、fixed时元素将脱离标准流
七、IFC 布局规则
1. 子元素水平方向横向排列,并且垂直方向起点为元素顶部
2. 子元素只会计算横向样式空间,【padding、border、margin】,垂直方向样式空间不会被计算,【padding、border、margin】
3. 在垂直方向上,子元素会以不同形式来对齐(vertical-align)
4. float 元素优先排列
IFC 作用:解决元素垂直居中
深入理解BFC与IFC相关推荐
- 学习理解BFC、IFC、GFC、FFC
一.盒子模型 要理解BFC与IFC,首先要理解盒子模型,盒模型的结构如下: 从内到外依次为 content -> padding -> border -> margin 常见的盒模 ...
- 深入理解 BFC、IFC、GFC、FFC
1.定义 BFC全称 是 block formatting context,也就是 块级格式化上下文,是用于 布局块级盒子 的一块 渲染区域. IFC全称 是 inline formatting co ...
- 理解BFC、IFC、GFC、FFC
什么是fc? FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关 ...
- BFC与IFC概念理解+布局规则+形成方法+用处
想要理解BFC与IFC,首先要理解另外两个概念:Box 和 FC(即 formatting context). Box 一个页面是由很多个 Box 组成的,元素的类型和 display 属性决定了这个 ...
- BFC、IFC、GFC、FFC概念理解、布局规则、形成方法、用处浅析
接着聊一下BFC.IFC,与FFC.GFC,GFC是一种二维度的布局方式,现在也蛮火,但是因为兼容性问题比较大,现在用的不多.其实这些布局方式经常会遇到,主要是想了解一下相关的各种概念和术语. 想要理 ...
- BFC、IFC、GFC、FFC
BFC.IFC.GFC.FFC CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC. 那么到底什么是BFC.IFC.GFC和FFC呢? What's FC? 一定不是KFC,FC的全称是 ...
- CSS之BFC、IFC、GFC、FFC简述
学习目标:BFC.IFC.GFC.FFC FC是什么? FC全称Formatting Contexts,是格式上下文.它是W3C CSS2.1规范中的一个概念,它是页面中的一块渲染区域,并且有一套渲染 ...
- 第 20 题:请描述一下 BFC、IFC、GFC 和 FFC 的区别?
网上看了很多文章,只想说一句话:"真的啥都没看懂".以下是我个人的理解,有不对的地方可以提出. 在描述他们之间的区别之前,我们首先要了解一下什么是 BFC.IFC.GFC.FFC? ...
- CSS 7 CSS 层叠规则 BFC 和 IFC 机制
CSS 文章目录 CSS 7 CSS 层叠规则 BFC 和 IFC 机制 7.1 BFC 7.1.1 常见的定位方案 7.1.2 BFC 理解 7.1.3 如何触发BFC [如何为元素添加BFC] 7 ...
最新文章
- 练手扎实基本功必备:非结构文本特征提取方法
- 非线性优化:徒手实现LM算法
- 生活中的实验 —— 磁铁的使用
- boost::core模块实现交换primitive
- 网站开发流程-WEB开发的流程
- oracle数据库11gr2,Oracle 11g R2 X64数据库安装
- mysql非主键索引_主键索引和非主键索引的区别
- 日文邮件变成乱码解决方案
- File /usr/bin/pip, line 11, in module sys.exit(__main__._main()) AttributeError: 'module' ob...
- Linux操作Oracle(2)——Oracle导出exp导出用户报错:EXP-00006: 出现内部不一致的错误 EXP-00000: 导出终止失败
- 苹果Mac环境如何配置定时任务?
- OpenDDS 配置文件详解
- 【LOJ6038】【雅礼集训 2017 Day5】远行(LCT,树的直径)
- EXCEL 未启用宏,但包含启用宏的内容
- 2014中秋节,用java为QQ游戏美女找茬写辅助
- LE250UQ激光位移传感器
- vue-composition-api.mjs:1:7: ERROR: No matching export in “node_modules/vue/dist/vue.runtime.esm-bun
- App Thinning Xcode9打包选择
- Android:通过systrace进行性能分析及使用-详细
- Java实现家谱家族管理系统,图形化家谱家族树,单机应用程序
热门文章
- 使用条件分布模态流进行多变量概率时序预测
- wireshark分析tcp协议(二)四次挥手(异常情况)【理论 + 实操】
- 如果只定一个指标,市场运营的考核指标应该是什么?
- 动态规划之买瓜子—C说算法系列
- Win 7+CentOS 7双系统安装血泪史T_T
- 2022-2027年中国海参行业市场调研及未来发展趋势预测报告
- STM32配置CH375B成HID Host模式读取自定义HID设备的数据 ——STM32端口初始化
- 误删系统rpc服务器不可用,rpc服务器不可用,小编教你rpc服务器不可用怎么办
- NumPy入门讲座(3):操作数组
- lanker php 大码,GitHub - TREYWANGCQU/LANKERS: CQU-LANKERS