CSS里的BFC和IFC的用法

BitAetherPro
• 阅读 1829

一、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;
}

效果图例如以下:
CSS里的BFC和IFC的用法

这正满足了规范的第三条:

每一个元素的左边,与包括的盒子的左边相接触。即使存在浮动也是如此。

所以假设我们须要将黑色区域撑到红色的左边。就须要利用规范的第四条:
BFC的区域不会与float重叠。

也就是说我们须要创造BFC区域。我们通过将红色区域的overflow设为hidden来触发BFC:

.main {
overflow:hidden;
height:200px;
background-color:red;
}

效果例如以下:

CSS里的BFC和IFC的用法

5、接下来看看清除内部浮动

 **首先是父div套子div**

<div class="parent">
<div class="child"></div>
</div>

6、然后是css:

.child {
border:1px solid red;
width:100px;
height:100px;
float:left;
}

.parent {
border:1px solid black;
width:300px;
}

效果例如以下:

CSS里的BFC和IFC的用法

能够看到,父div压根就没有被撑开。
我们再回想一下BFC规范中的第六条:
计算BFC的高度时,浮动元素也參与计算。

所以我们须要将父div触发为BFC,也就是将其overflow设为hidden:

.parent {
border:1px solid black;
width:300px;
overflow:hidden;
}

效果例如以下:

CSS里的BFC和IFC的用法

能够看到父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重叠后的效果:

CSS里的BFC和IFC的用法

我们再看看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;
}

效果例如以下:
CSS里的BFC和IFC的用法

二、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。

如果大家觉得我的文章写的还不错的话,就关注 收藏一下哦!

还可以加我微信一起探讨下前端问题。

vx:rgz987

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Karen110 Karen110
4年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
good123 good123
3年前
浅谈BFC格局~
1.BFC含义💳BFC全称:BlockFormattingContexts块级元素格式化上下文W3CCSS2.1规范中的一个概念,它是一个独立容器,决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系一个页面是由很多个Box组成的,元素的类型和display属性,决定了这个Box的类型,不同类型的Box,会参与不
Stella981 Stella981
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Wesley13 Wesley13
3年前
CSS块级元素与行内元素
CSS块级元素与行内元素行内元素与块状元素1、块级元素:可以设置width,height属性。行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。可以通过lineheight设置行高(行高和height是不同的东西)。2、块级元素:可以设置margin和padd
Wesley13 Wesley13
3年前
CSS定位规则之BFC
技术改变世界!学习改变人生!1. BFC(block formatting context,中文常译为块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素
Stella981 Stella981
3年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
BitAetherPro
BitAetherPro
Lv1
夜闻归雁生乡思,病入新年感物华。
文章
3
粉丝
0
获赞
0