BFC和IFC

67677
197 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

在css布局中，了解掌握IFC和BFC能帮我们更快更好的实现样式的调节，同时还能避免一些由于格式上下文带来的错误。

什么是BFC

BFC又称之为块级格式化上下文，BFC是一个独立的布局环境，这就意味着它内部的元素布局不会受到外部的影响。

如何创建一个BFC

  • 浮动元素和绝对定位元素。

  • 非块级盒子的块级容器----inline-blocks、table-cells和table-captions

  • overflow值不为visible的块级盒子

  • HTML根元素

BFC的特点

  • 内部的box会在垂直方向一个个排列。

  • 垂直方向由margin决定，属于同一个BFC相邻的box会发生margin重叠。

  • BFC的区域不会和float box 重叠，可以用来清除浮动（BFC计算高度的时候会计算浮动元素）。

  • BFC可以作为两栏布局，一行固定宽度，一行自适应。

  • BFC就是页面上的一个隔离容器，容器里面的子元素不会影响到外面的元素。

BFC可以解决的常见问题

我们在布局的时候很多时候可能会让两个块级元素进行堆叠，但是有时候其出现的效果不是我们所想要的，具体例子如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>
<style>
  div{
    width: 100px;
    height: 100px;
  }
  .box1{
    background-color: red;
    margin-bottom: 50px;
  }
  .box2{
    margin-top: 50px;
    background-color: pink;
  }
</style>

image.png

可以看到我们上述的代码就是一个堆叠的块级元素，我们分别设置它们的margin top和bottom，但是我们发现有个margin好像失效了，这就是我们常说的外边距塌陷。这个问题的产生只有对block元素有效，产生的原因是根据规范，如果一个盒子如果没有上补白也就是我们说的padding-top和上边框border-top,那么这个盒子的上边距就会和其内部文档流中的第一个元素的上边距重叠。解决的办法就是可以用到我们的BFC，只要其中一个元素开启BFC就可以避免这个问题。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box1"></div>
    <div class="container">
      <div class="box2"></div>
    </div>
  </body>
</html>
<style>
  .container{
    overflow: hidden;
  }
  .box1{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 50px;
  }
  .box2{
    width: 100px;
    height: 100px;
    margin-top: 50px;
    background-color: pink;
  }
</style>

image.png

什么是IFC

（inline Formatting Context）叫做“行级格式化上下文”。

如何创建一个IFC

块容器盒中只有内联级盒子

IFC特点

  • 在一个IFC里，盒是一个接一个从顶部水平放置。

  • 摆放这些框，它们水平方向的margin,padding,border所占空间会被计算在内。

  • 行盒的高度由行盒内最高的inline boxes决定。

  • 垂直方向，可通过vertical-align设置文本基线，取值可以是具体像素值，也可以是middle等方向词。

  • 当内部的容器盒子太多了一个inline-box装不下来，他们折行之后会变成两个或者多个line box， line box们垂直方向无间隔地堆叠，但不能重叠。

  • 浮动后IFC内部的浮动元素宽高参与IFC的line-box宽高计算并且从换行后的行开始排列

avatar
文章
阅读
粉丝