CSS之BFC与IFC

不管各行各业,精通一门也是非常厉害的,就像前端,之前一直觉得JavaScript是前端最重要的,殊不知不起眼的css用好了也是一门很强大的技术!废话不多说,今天来谈谈css中的BFC和IFC。

FC

FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。BFC和IFC都是常见的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。

BFC

BFC,即块格式化上下文,它既不是css的一个属性也不是一段代码,而是一个规范,就是页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响到外面的元素。

BFC的布局规则:

1.内部的盒子会在垂直方向,一个个地放置,BFC有隔离作用,内部元素不会受外部元素的影响。
2.盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠;
3.每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此;
4.BFC的区域不会与外面的浮动元素重叠;
5.计算BFC的高度时,必须包含BFC内的浮动子元素的高度。

如何产生BFC?

1.根元素;
2.float的属性不为none;
3.position为absolute或fixed;
4.display为inline-block,table-cell,table-caption,flex;
5.overflow不为visible的块级元素;

BFC的用途

1.清除内部浮动

(1)父div套子div

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

css:

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

效果如下:
在这里插入图片描述
可以出来,父div压根就没有被撑开;
而父元素为BFC的时候,可以看到父元素被撑开了:

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

在这里插入图片描述
(2)由于BFC有隔离作用,就能防止外部的文字环绕;
(3)让div元素创建BFC后就能避免重叠;

2.解决外边距塌陷:

先定义两个垂直的div:

<div class="p"></div>
<div class="p"></div>

然后定义margin:

.p {
  width:200px;
  height:50px;
  margin:50px 0;
  background-color:red;
}

margin重叠后的效果:
在这里插入图片描述
这里只需要将两个div放在不同的BFC里就可以解决外边距塌陷问题:为第二个div套一个父亲div,然后将其overflow设为hidden来激活一个BFC就可以使margin不再重叠。


<div class="p"></div>
<div class="wrap">
  <div class="p"></div>
</div>
.wrap {
  overflow:hidden;
}

效果如下:
在这里插入图片描述
(3)定义左边宽度固定右边宽度自适应的两栏:

<div class="left" style="float:left;width:100px;height:100px"></div>
<div class="right" style="overflow:hidden;height:100px"></div>

在这里插入图片描述

IFC

IFC(Inline Formatting Contexts)直译为"内联格式化上下文",IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)
IFC中的line box一般左右都贴紧整个IFC,但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的,当插入块级元素时(如p中插入div)会产生两个匿名块与div分隔开,即产生两个IFC,每个IFC对外表现为块级元素,与div垂直排列。

IFC作用:

(1)水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。
(2)垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值