BFC 学习笔记

作者: JosephScript | 来源:发表于2020-12-02 17:31 被阅读0次

BFC 学习笔记
BFC,IFC学习笔记
BFC与IFC学习笔记
CSS 中的 BFC 是什么？
学习BFC
学习BFC
CSS常用知识点
BFC及其应用
【CSS】BFC、简单布局、浏览器兼容及常见居中方式
BFC &边距合并& 浏览器兼容

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>

效果：