BFC 学习笔记

2020-12-02 本文已影响0人 JosephScript

BFC - Block formatting context - 块级上下文
说实话其实光看文字蛮抽象的，所以我就举一些例子吧：

先上图！

规则图

比如：

对于外围具有float元素影响到本身的：

代码（修改前）：

<style>
  .left {
    width: 100px;
    height: 100px;
    float: left;
    background-color: lightblue;
  }
  .right {
    height: 200px;
    width: 200px;
    background-color: lightseagreen;
  }
</style>
<body>
  <div class="left">left</div>
  <div class="right">right</div>
</body>

效果：

1-1

此时，你希望两个元素不要重叠，可以使用 overflow: hidden 附加在 "right" 元素上，使其成为一个 BFC元素，这样 “left” 元素作为外围元素，就不会再对其有任何威胁。

代码（修改后）：

<style>
  .left {
    width: 100px;
    height: 100px;
    float: left;
    background-color: lightblue;
  }
  .right {
    height: 200px;
    width: 200px;
    background-color: lightseagreen;
    overflow: hidden;  /*区别点，符合BFC规则就行，不记得的看上面的规则图*/
  }
</style>
<body>
  <div class="left">left</div>
  <div class="right">right</div>
</body>

效果：

1-2

对于内部具有float元素超出元素的：

代码（修改前）：

<style>
  .A {
    width: 100px;
    height: 100px;
    float: left;
    background-color: lightblue;
  }
  .B {
    background-color: lightseagreen;
  }
</style>
<body>
  <div class="B">B<div class="A">A </div></div>
</body>

效果：

2-1

A元素没有固定高度，子元素A是浮动元素，可能会影响到外部元素。所以给 B元素增加一个 overflow: hidden 使其成为一个 BFC 元素，就不会影响到外部元素了。

代码（修改后）：

<style>
  .A {
    width: 100px;
    height: 100px;
    float: left;
    background-color: lightblue;
  }
  .B {
    background-color: lightseagreen;
    overflow: hidden; /*修改点*/
  }
</style>
<body>
  <div class="B">B<div class="A">A </div></div>
</body>

效果：

2-2

对于两个元素margin合并的：

代码（修改前）:

<style>
  .A {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #fff;
    background-color: lightblue;
    margin: 20px;
  }
  .B {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #fff;
    background-color: lightseagreen;
    margin: 20px;
  }
</style>
<body>
  <div class="B">B</div>
  <div class="A">A </div>
</body>

效果：

3-1

看到黄色部分了么？那个是 B元素的 margin，完全贴着 A元素的边边

这个时候，我们就可以给 A 或者 B 元素加一点东西，让他成为 BFC 元素，就可以巧妙的解决这个问题~

代码（修改后）：

/*样式部分就不抄了，省空间*/
<body>
/*这个地方换成任何符合 BFC 规则（看上面的规则图）的元素 也是可以的咧*/
  <div style="overflow: hidden;"> /*这个场景 overflow: hidden 和 display: inline-block 比较好*/
    <div class="B">B</div>
  </div>
  <div class="A">A </div>
</body>

效果：

3-2

就是给 B元素找了个符合 BFC 规则（看上面的规则图）的父元素包起来。

总结：
如果出现了子元素影响外围元素或者是外围元素影响内部元素之类的问题，都可以使自身变成一个 BFC 元素来修复此类的问题。可以把 BFC 理解成一个锁上门的房子，谁也进不去，谁也出不来，在里面干啥都行~

BFC 学习笔记

猜你喜欢

热点阅读