BFC和IFC怎么在CSS中使用-创新互联

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

创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站制作、做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的姜堰网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

一什么是 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 特性：

body 根元素；
浮动元素：float 不为none的属性值；
绝对定位元素：position (absolute、fixed)
display为： inline-block、table-cells、flex
overflow 除了visible以外的值 (hidden、auto、scroll)

二 BFC的特性及应用

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

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

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

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

效果图是：

BFC和IFC怎么在CSS中使用

根据BFC规则的第3条：

盒子垂直方向的距离由margin决定，

属于同一个BFC的 + 两个相邻Box的 + 上下margin 会发生重叠。

上文的例子之所以发生外边距折叠，是因为他们同属于 body这个根元素，所以我们需要让它们不属于同一个BFC，就能避免外边距折叠：

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

.wrap {  
  overflow:hidden;  

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

效果图是：

BFC和IFC怎么在CSS中使用

2 BFC可以包含浮动的元素（清除浮动）

正常情况下，浮动的元素会脱离普通文档流，所以下面的代码里：

<div style="border: 1px solid #000;">
    <div style="width: 50px; height: 50px; background: #eee;
               float: left;">
    </div>
</div>

外层的div会无法包含内部浮动的div，效果见下图：

BFC和IFC怎么在CSS中使用

但如果我们触发外部容器的BFC，根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部div容器就可以包裹着浮动元素，所以只要把代码修改如下：

<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

就可以完成以下效果：

BFC和IFC怎么在CSS中使用

3 BFC可以阻止元素被浮动元素覆盖

先看一个例子：

<div class="aside"></div>  
<div class="main"></div>  

div {  
  width:300px;  
}  
.aside {  
  width: 100px;  
  height: 150px;  
  float: left;  
  background: black;  
}  
.main {  
  height:200px;  
  background-color:red;  
}

效果图是：

BFC和IFC怎么在CSS中使用

之所以是这样，是因为上文的规则5：每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

所以要想改变效果，使其互补干扰，就得利用规则6 ：BFC的区域不会与float重叠，让 <div class="main"> 也能触发BFC的性质，即：

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

通过这种方法，就能用来实现两列的自适应布局。

三简要介绍IFC

IFC布局规则：

1 框会从包含块的顶部开始，一个接一个地水平摆放。

2 摆放这些框时，它们在水平方向的内外边距+边框所占用的空间都会被考虑；在垂直方向上，这些框可能会以不同形式来对齐：水平的margin、padding、border有效，垂直无效。不能指定宽高;

3 行框的宽度是由包含块和存在的浮动来决定;行框的高度由行高来决定

以上就是BFC和IFC怎么在CSS中使用，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

本文名称：BFC和IFC怎么在CSS中使用-创新互联
本文链接：/article44/ddpiee.html

成都网站建设公司_创新互联，为您提供用户体验、App开发、小程序开发、外贸建站、网页设计公司、标签优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容