聊聊BFC

Time Flying

标签

Edit in GitHub

BFC 含义

块级格式化上下文(Block Formatting Context)

BFC 特性

同一个 BFC 内元素外边距会发生重合(见案例一)
BFC 内可以有浮动元素(见案例二)
BFC 内可以分离浮动元素(见案例三)

案例一

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 100px;
  }
</style>

<body>
  <div></div>
  <div></div>
</body>

可以看到此时两个 div 之间的间距并不是 200px, 而是 100px

此时可以在父节点加上 overflow: hidden 使其变为 BFC 元素, 从而避免重叠。

<style>
  div {
    overflow: hidden;
  }
  p {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 100px;
  }
</style>

<body>
  <div>
    <p></p>
  </div>
  <div>
    <p></p>
  </div>
</body>

此时, 可以看到两个 div 之间的距离已变为期望的 200 px；

案例二

<style>
  .border {
    border: 1px solid #000;
  }
  .content {
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
  }
</style>

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

子节点加上 float: left 后, 其脱离了文档流, 所以只看到一条 1px 的线条, 如下:

此时在父节点中加上 overflow: hidden 使其变为 BFC 元素从而消除浮动, 代码如下:

<style>
  .border {
    border: 1px solid #000;
    overflow: hidden;  // 在此处加上 overflow: hidden; 可以消除浮动
  }
  .content {
    width: 100px;
    height: 100px;
    background-color: #ff0000;
    float: left;
  }
</style>

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

案例三

<style>
  .content1 {
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
  }

  .content2 {
    width: 200px;
    height: 200px;
    background-color: green;
  }
</style>

<body>
  <div class="content1"></div>
  <div class="content2"></div>
</body>

相邻节点中的一个节点使用 float: left, 其脱离文档流, 从而两个 div 标签发生了重叠,

此时在普通流节点上使用 overflow: hidden 使其变为 BFC 元素从而使 BFC 元素和浮动元素分离:

<style>
  .content1 {
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
  }

  .content2 {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;
  }
</style>

<body>
  <div class="content1"></div>
  <div class="content2"></div>
</body>

如何触发 BFC

* overflow: 不为 visible;
* position: 不为 static 以及 relative;
* float: 不为 none;
* display: 为 inline-box、table-ceil、flex;