2、BFC

最新推荐文章于 2023-12-09 08:13:08 发布

伊见~

最新推荐文章于 2023-12-09 08:13:08 发布

阅读量114

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43929206/article/details/127953506

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

首先什么是BFC呢？

我们在页面布局的时候，经常出现以下情况：

这个元素高度怎么没了？
这两栏布局怎么没法自适应？
这两个元素的间距怎么有点奇怪的样子？
......

原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到了BFC的概念

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

内部的盒子会在垂直方向上一个接一个的放置
对于同一个 BFC 的俩个相邻的盒子的 margin 会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动子元素也参与计算
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC的目的就是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。

触发条件

可以通过如下的设置来触发（产生）一个BFC：

根元素，即 HTML 元素
浮动元素：float 值为 left、right
overflow 值不为 visible，为 auto、scroll、hidden
display 的值为 inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position 的值为 absolute 或 fixed

应用场景

当一个容器具备了BFC之后，我们就可以利用BFC的特性，解决很多问题

防止margin重叠（塌陷）

<style>
  p {
    color: #f55;
    background: #fcc;
    width: 200px;
    line-height: 100px;
    text-align: center;
    margin: 100px;
  }
</style>
<body>
  <p>Haha</p>
  <p>Hehe</p>
</body>

两个P元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的marign为80的话，两个p之间的距离还是100，以最大的为准。

前面说到，同一个BFC的两个相邻的容器会发生重叠

可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠。

<style>
  .wrap {
    overflow: hidden; // 新的BFC
  }
  p {
    color: #f55;
    background: #fcc;
    width: 200px;
    line-height: 100px;
    text-align: center;
    margin: 100px;
  }
</style>
<body>
  <p>Haha</p>
  <div class="wrap">
    <p>Hehe</p>
  </div>
</body>

清除内部浮动：

<style>
  .par {
    border: 5px solid #fcc;
    width: 300px;
  }

  .child {
    border: 5px solid #f66;
    width: 100px;
    height: 100px;
    float: left;
  }
</style>
<body>
  <div class="par">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

页面显示如下：

而BFC在计算高度的时候，浮动元素也会参与，所以我们可以触发.par元素才能BFC，则内部浮动元素计算高度的时候也会计算。

.par {
  overflow: hidden;
}

实现效果如下：

自适应多栏布局

这里举个例子：两栏布局

<style>
  body {
    width: 300px;
    position: relative;
  }

  .aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #f66;
  }

  .main {
    height: 200px;
    background: #fcc;
  }
</style>
<body>
  <div class="aside"></div>
  <div class="main"></div>
</body>

效果如如下：