CSS里的BFC和IFC的用法
CSS里的BFC和IFC的用法
一、BFC
Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则 (可以把 BFC 理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素)。
1、BFC的布局规则例如以下:
①.内部的盒子会在垂直方向,一个个地放置。
②.盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠。
③.每一个元素的左边,与包括的盒子的左边相接触,即使存在浮动也是如此。
④.BFC的区域不会与float重叠。
⑤.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
⑥.计算BFC的高度时,浮动元素也參与计算。
2、介绍过了BFC的布局规范,再来说说哪些元素会触发BFC。
只要元素满足下面任一条件即可触发 BFC 特性
①.根元素。
②.float的属性不为none。
③.position为absolute或fixed。
④.display为inline-block;table-cell;table-caption;flex。
⑤.overflow不为visible。
3、接下来说说BFC的作用和原理
①、解决margin重叠问题
②、解决浮动高度塌陷问题
③、解决侵占浮动元素的问题
首先看看自适应两栏布局
我们先定义两个div:
<div class="aside"></div>
<div class="main"></div>
4、然后定义css:
div { width:300px; }
.aside { width: 100px; height: 150px; float: left; background: black; }
.main { height:200px; background-color:red; }
效果图例如以下:
这正满足了规范的第三条:
每一个元素的左边,与包括的盒子的左边相接触。即使存在浮动也是如此。
所以假设我们须要将黑色区域撑到红色的左边。就须要利用规范的第四条:
BFC的区域不会与float重叠。
也就是说我们须要创造BFC区域。我们通过将红色区域的overflow设为hidden来触发BFC:
.main { overflow:hidden; height:200px; background-color:red; }
效果例如以下:
5、接下来看看清除内部浮动
首先是父div套子div
`
`
6、然后是css:
.child { border:1px solid red; width:100px; height:100px; float:left; }
.parent { border:1px solid black; width:300px; }
效果例如以下:
能够看到,父div压根就没有被撑开。
我们再回想一下BFC规范中的第六条:
计算BFC的高度时,浮动元素也參与计算。
所以我们须要将父div触发为BFC,也就是将其overflow设为hidden:
.parent { border:1px solid black; width:300px; overflow:hidden; }
效果例如以下:
能够看到父div已经撑开了。
7、再谈谈margin重叠问题。
先定义两个垂直的div:
<div class="p"></div>
<div class="p"></div>
然后定义margin:
.p { width:200px; height:50px; margin:50px 0; background-color:red; }
能够看到margin重叠后的效果:
我们再看看BFC规范的第二条:
盒子垂直方向的距离由margin决定,属于用一个BFC的两个相邻Box的上下margin会发生重叠。
说明两者属于同一个BFC,所以我们须要两个div不属于同一个BFC。
为第二个div套一个父亲div。然后讲其overflow设为hidden来激活一个BFC就能够使margin不再重叠。
<div class="p"></div>
<div class="wrap">
<div class="p"></div>
</div>
.wrap { overflow:hidden; }
效果例如以下:
二、IFC
IFC(Inline Formatting Contexts)
直译为”内联格式化上下文”,IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)
水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。
垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。
BFC的布局规则例如以下:
1.ifc中的元素会在一行中从左到右排列。
2.在一行上的所有元素会在该区域形成一个行框。
3.行宽的高度为包含框的高度,高度为行框中最高元素的高度。
4.浮动的元素不会在行框中,并且浮动元素会压缩行框的宽度。
5.行框的宽度容纳不下子元素时,子元素会换到下一行显示,并且会产生新的行框。
6.行框的元素内遵循text-align和vertical-align。
CSS里的BFC和IFC的用法相关推荐
- 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 ...
- css中的BFC、IFC、GFC、FFC
BFC(块级格式上下文)在面试的时候,关于对BFC的理解是一非常重点的内容,就来看看吧 BFC (Block Formatting Contexts )就是块级格式上下文,是页面盒模型布局中的一种 C ...
- CSS里:focus-within 的作用和用法
outline-offset属性设置轮廓框架在 border 边缘外的偏移. Outlines在两个方面不同于边框: Outlines 不占用空间 Outlines 可能非矩形 outline-off ...
- CSS——FC(BFC/IFC/FFC/GFC)超详细版+原理案例分析
文章目录 一.Box 二.包含块 2.1 确定一个元素的包含块 2.2 EXAMPLE 三.FC(Formatting Context) 四.BFC 1. BFC的形成条件 2. BFC的布局规则 3 ...
- CSS之BFC、IFC、GFC、FFC简述
学习目标:BFC.IFC.GFC.FFC FC是什么? FC全称Formatting Contexts,是格式上下文.它是W3C CSS2.1规范中的一个概念,它是页面中的一块渲染区域,并且有一套渲染 ...
- 深入理解 BFC、IFC、GFC、FFC
1.定义 BFC全称 是 block formatting context,也就是 块级格式化上下文,是用于 布局块级盒子 的一块 渲染区域. IFC全称 是 inline formatting co ...
- 深入理解BFC与IFC
一.盒子模型 要理解BFC与IFC,首先要理解盒子模型,盒模型的结构如下: 从内到外依次为 content -> padding -> border -> margin 常见的盒模 ...
- 【转】前端的BFC、IFC、GFC和FFC
什么是BFC.IFC.GFC和FFC CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC. FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念. ...
- 学习CSS中的BFC
定义 BFC全称为block formatting context,意为块级格式化上下文,是Web页面中盒模型布局的css渲染模式. 可能上面的解释看了有点懵逼,通俗的说BFC指的的是一块区域的布局, ...
- 学前端的你了解这些知识吗?——BFC、IFC、GFC、FFC
BFC.IFC.GFC 和 FFC 前言 想要了解BFC.IFC.GFC.FFC,就必须先要了解FC. FC的全称是:Formatting Contexts(格式化上下文),它是W3C规范中的一个概念 ...
最新文章
- 小学 n 阶乘的后面包含多少零c语言,C语言---求n的阶乘后面有多少个连续的0
- 30+ 新鲜惊奇的 jQuery 插件与教程
- SDUT 2405 Strange Square(DFS)
- Spring Framework 官方文档学习(一)介绍
- 今天看了《一声叹息》
- USB协议介绍二 传输
- 一个简单的小程序demo
- 关于Eclipse优化记录
- java eofexception_EOFException异常详解
- 苹果雪豹操作系统_苹果 M1 版 MacBook 软件兼容实测:VS Code、PhotoShop 目前还不能用(附列表)...
- php快递100查询,php采集快递100的快递查询api
- 3-8 如何使用图片 CDN 优化图片
- Excel中的美元符号$
- 怪物猎人世界取得服务器信息,怪物猎人世界 Steam好友联机服务器选择工具V1.2...
- ios wallet开发_iOS Wallet 开发
- 网站cookie和曲奇饼干_谷歌扔饼干和营销人员感到恶心
- 2021年建筑架子工(建筑特殊工种)证考试及建筑架子工(建筑特殊工种)模拟考试题
- 2018.05.29 讨厌培训机构
- 新增内存条后,已安装内存和可用内存不一致(win7)
- MyBaitsPlus快速入门,java进阶书籍推荐
热门文章
- python you-get库
- 用C处理字符串:键盘输入“yes”,则输出“ok”;输入其他字符,则输出“Thank you”;
- ubuntu几款好用的代码编辑器
- Python 使用 OpenCC 实现中文简繁转换
- yii mysql 查询 类型转换_yii2 数据库查询结果字段类型的问题
- 百度竞价开户优化的细节到底是哪些
- 关于计算机学院 公众号的名字,最新微信公众号名字大全
- Klog开发笔记——分页插件 Kaminari 介绍
- Kaminari的几个对象
- 神仙打架!清华公布2020特奖候选人名单,有人三篇顶会一作!还有人...