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;

question

Here is my demo,

<html lang="en">
  <style>
    li {
      display: inline-block;
      background: red;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 30px
    }

    .demo {
      width: 90px;
    }

    .clearfix {
      overflow: visible;
    }
  </style>
  <body>
    <ul class="demo">
      <li>testtest</li>
      <li>testtest</li>
      <li>testtest</li>
      <li>testtest</li>
      <li>testtest</li>
      <li>testtest</li>
    </ul>
  </body>
</html>

I'm confused why is it, I want to use overflow: hidden and not expect the strange gap, how can I do?

the solve way is to add line-height: 0 to the class demo and add line-height: 12px to the tag li.

there-is-an-strange-distance-when-using-overflow-hidden