BFC和IFC怎么在CSS中使用

本篇文章给大家分享的是有关BFC和IFC怎么在CSS中使用，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

创新互联公司主要从事成都网站制作、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务敦化,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

一 什么是 BFC

和之前所有博文一样，还是先从What的角度开始介绍，由浅入深的理解BFC。

所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。

它是页面中的一块渲染区域，并且有一套渲染规则.

它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素，反之也如此。

BFC的布局规则如下：

1 内部的盒子会在垂直方向，一个个地放置；
2 BFC是页面上的一个隔离的独立容器；
3 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ；
4 计算BFC的高度时，浮动元素也参与计算
5 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
6 BFC的区域不会与float重叠；

那么如何触发 BFC呢？只要元素满足下面任一条件即可触发 BFC 特性：

1. body 根元素；

2. 浮动元素：float 不为none的属性值；

3. 绝对定位元素：position (absolute、fixed)

4. display为： inline-block、table-cells、flex

5. overflow 除了visible以外的值 (hidden、auto、scroll)

二 BFC的特性及应用

接下来介绍BFC常见的特性和应用，这一部分 在解释原因时，会用到上文的布局规则 和 触发条件，所以需要注意一下。

1 两个 相邻的普通流中的 块元素垂直方向上的 margin会折叠

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