就这么地说说BFC跟IFC

广州交租公

2023-06-29 帮助6人

前言

什么是BFC

BFC= block formatting context,中文翻译成块状格式上下文，意思是一块独立渲染且不受外界影响的区域。很多人写布局的时候都会遇到，但不是每个人都意识到这就是BFC。

有什么意义

在日常布局中，这个特性能让我们尽情地在某个区域里尽情发挥，而不需要顾忌它对外面造成多余的影响。比如在写网站首页的顶部导航栏，就可以用BFC的特性让它跟下面的网页正文跟页脚的布局独立互不影响。

BFC的特性

先了解特性，后面再用日常案例去讲每个特性的用处

内部的盒子在垂直的方向，一个一个地放置
同一个BFC的相邻的盒子的上下margin会发生重叠，不同BFC中相邻的盒子的margin不会发生重叠
属于页面的一个独立的区域，不受影响也不影响外界
计算高度时，浮动元素也参与
每个元素的左边，与包含的盒子的左边接触
区域不会与浮动的重叠

如何触发BFC的特性

利用浮动，float
绝对定位：position等于absolute,fixed
display: inline-block（行内块），table-cell（表格单元格）,flex（弹性盒子），flow-root
溢出元素：overflow 除了visible以外（hidden,auto,scroll）

案例讲解

关于这个特性，真的是说多无畏，直接用日常开发遇到的案例说话

margin折叠

<body>
    <div class='child'></div>
    <div class='child'></div>
</body>
  
<style>
.child {
  width: 100%;
  height: 100px;
  background: #336667;
  margin-top: 10px;
  margin-bottom : 10px;
}
</style>

学新通技术网

两个挨着的child的margin都是10px，按照正常的理解应该中间的间隙是10 10 = 20px，但结果却跟意料不一样。从图可以看出，同一个BFC里面的上下margin会重叠（取两个margin的更大值），这时我们尝试把它们用BFC的方法,父元素添加overflow：hidden的特性。

<div class='child'></div>
<div class="bfc">
     <div class='child'></div>
</div>
  
<style>
.bfc{
  overflow: hidden;
}
.child {
  width: 100%;
  height: 100px;
  background: #336667;
  margin-top: 10px;
  margin-bottom : 10px;
}
</style>

学新通技术网

如此一来，上下两个盒子之间的margin就不再互相干扰了

清除浮动，解决父元素高度坍塌

当子元素实现浮动的时候，它会脱离正常文档流，父元素的高度并没有被撑起，从图就能看出来parent并不能包含住child元素。

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

<style>
  .parent {
    border: 3px solid red;
  }
  .child {
    width: 50px;
    height: 50px;
    background: #336667;
    float: left;
  }
</style>

学新通技术网

为了清除浮动带来的父元素高度崩塌，我们利用规则计算高度时，浮动元素也参与，让父元素触发BFC.

.parent {
    border: 3px solid red;
    overflow: hidden;
  }

学新通技术网

BFC区域不会与浮动重叠

当利用浮动去实现分栏布局，看这个代码，兄弟元素浮动后，脱离文档流，并浮在了第二个元素的上方。

<div class="left"></div>
<div class="main"></div>
<style>
  .left {
    width: 50px;
    height: 100px;
    background: #336667;
    float: left;
  }

  .main {
    width: 100px;
    height: 150px;
    background: yellow;
  }
</style>

学新通技术网

触发BFC，让浮动元素无法覆盖BFC

.main {
    overflow: hidden;
  }

学新通技术网

BFC的总结

关于BFC，我们只需要知道在布局的时候会利用它能使某个区域独立出来的特性，为我们布局时能忽视某子外的干扰因素就足够了。

IFC是什么

相对BFC 块级格式上下文，还有一个叫IFC的玩意，就是inline formatting context，中文叫行内格式上下文。

有一种情况会触发IFC: 块级元素中仅包含内联级别元素

<div>
    <span></span>
    <strong></strong>
</div>

内联/行内元素：是指那些不会形成新的内容块的源文档的元素，内容被分布在行间，例如，内容段落或内联图片

IFC 规则

盒子是水平一个接一个的排列, 水平的 margin, 内边距, 边框是可以有的
垂直方向的对齐, 可能是底部对齐, 顶部对齐, 也可能是基线对齐
行框中的内联盒子的高度小于行框的高度时, 内联盒子的垂直方向的对齐方式取决于 vertical-align 属性
当 IFC 中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC；
当一个行框水平不能容纳内联盒子时, 他们将会在垂直方向上产生多个行框, 他们上下一个挨着一个, 但是不会重叠
可以用父元素的text-align去控制里面行内元素的对齐方式
是当 IFC 中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC；

案例

用text-align去让行内元素水平居中排列

.text_container{
    width: 250px;
    border: 3px solid salmon;
    margin-top:60px;
    text-align: center;
  }
  strong,span{
    margin: 20px;
    background-color: cornflowerblue;
    color:#fff;
  }
  
  <div class="text_container">
        <strong>今天天气很好，请你喝拿铁</strong>
        <span>span的文字</span>
        <p>看看会不会换行</p>
    </div>

学新通技术网

块状元素水平装不下行内时，会自动换行

学新通技术网

IFC的总结

块状元素仅包含行内元素的情况我们经常会遇到，但有些人并没有意识到这会被称之为IFC的一种格式上下文，只需要知道里面行内元素的排列跟对齐方式，就能正常地运用这个特性了。

这篇好文章是转载于：学新通技术网

就这么地说说BFC跟IFC

前言

什么是BFC

有什么意义

BFC的特性

如何触发BFC的特性

案例讲解

margin折叠

清除浮动，解决父元素高度坍塌

BFC区域不会与浮动重叠

BFC的总结

IFC是什么

IFC 规则

案例

用text-align去让行内元素水平居中排列

块状元素水平装不下行内时，会自动换行

IFC的总结

TikTok加速器哪个好免费的TK加速器推荐

微信小程序没声音怎么办

抖音国际版要用什么加速器能流畅刷Tiktok的加速器

使用云服务器搭建个人游戏加速器教程

微信提示登录环境异常是什么意思原因

键盘上的负数是哪个键

excel图片置于文字下方的方法

微信人名旁边有个图标有什么用

Excel筛选和排序是灰色的怎么办

photoshop一直显示正在载入怎么办