likes
comments
collection
share

就这么简单地说说BFC跟IFC

作者站长头像
站长
· 阅读数 90

前言

作为一个多年经验的前端工程师，BFC一直处于一知半解的水平，就像对女孩的了解一样，一边说懂，一边被狠狠地碾压在地板上。我写的这篇文章，要好好地用图文并茂的方式让各位看官一看就懂，看完还不忘。

什么是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>

就这么简单地说说BFC跟IFC

两个挨着的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>

就这么简单地说说BFC跟IFC

如此一来，上下两个盒子之间的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跟IFC

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

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

就这么简单地说说BFC跟IFC

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跟IFC

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

.main {
    overflow: hidden;
  }

就这么简单地说说BFC跟IFC

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>

就这么简单地说说BFC跟IFC

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

就这么简单地说说BFC跟IFC

IFC的总结

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

转载自:https://juejin.cn/post/7209472157503815740
评论
请登录