BFC块级格式化上下文

勇敢小陈

已于 2023-03-20 17:38:43 修改

阅读量442

点赞数

文章标签：前端 html css3

于 2023-03-20 17:06:09 首次发布

本文链接：https://blog.csdn.net/ct5211314/article/details/129532271

版权

一、概念

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的：A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

翻译后：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素

可能大家翻译后也不太明白这句话的意思所以下面通过代码以及二次翻译来一起了解一下这句话所表达的意思

<div class="bfc_1">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="bfc_2">
      <div class="item4"></div>
      <div class="item5"></div>
    </div>
  </div>

在上述代码中bfc_1是一个BFC区域他包含了创建该上下文的item1、item2、item3、bfc_2元素，通过bfc_2也是一个包含了item4、item5、的BFC区域，bfc_1不包含创建了bfc_2的内部元素。

需要注意的点：1.每一个BFC区域只包括其子元素，不包括其子元素的子元素。2.每一个BFC区域都是独立隔绝的,互不影响

二、触发BFC

并不是每个元素都是一个BFC，而是当他满足触发条件时才会形成了个BFC区域。

满足一下任意条件即可：

·body根元素

·设置浮动，不包括none

·设置定位，absoulte或者fixed

·行内块显示模式，inline-block

·设置overflow，即hidden，auto，scroll

·表格单元格，table-cell

·弹性布局，flex

三、利用BFC解决问题

因为每一个BFC区域都是独立隔绝的,互不影响。所以我们可以根据其特性来解决部分问题

1.解决外边距塌陷问题（垂直塌陷）

<template>
  <div>
      <div class="item"></div>
      <div class="item"></div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.item {
  width: 100px;
  height: 100px;
  background: red;
  margin: 50px;
}
</style>

上述代码将渲染两个div元素且外边距为50px，那么这两个元素应该上下距离（50+50）100px，但会发现其渲染出来距离却是50px，这是因为出现了垂直塌陷导致的（两段margin重叠到了一块，互相影响）。

解决办法：由每个BFC都是相互隔绝互不影响的，所以我们可以将这两个div分别放在一个BFC里面即可。

<template>
  <div>
    <div class="bfc">
      <div class="item"></div>
    </div>
    <div class="bfc">
      <div class="item"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.item {
  width: 100px;
  height: 100px;
  background: red;
  margin: 50px;
}
.bfc{
  overflow: hidden;
}
</style>

这样就可以解决了

2.解决包含塌陷的问题

当父子关系的盒子，给子元素添加margin-top，有可能会把父元素一起带跑。

<template>
  <div>
    <div class="father">
      <div class="son"></div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.father{
  width: 200px;
  height: 200px;
  background: red;
}
.son{
  width: 50px;
  height: 50px;
  background: rosybrown;
  margin-top: 50px;
}
</style>

解决方案：通过BFC进行将父盒子变成一个独立的区域，这样在BFC区域内部的任何操作，都不会影响到外部。

<template>
  <div>
    <div class="father">
      <div class="son"></div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.father{
  width: 200px;
  height: 200px;
  background: red;
  overflow: hidden;
}
.son{
  width: 50px;
  height: 50px;
  background: rosybrown;
  margin-top: 50px;
}
</style>

3.浮动产生影响时，可以通过BFC来消除浮动产生的影响

当一个父元素不设置高的时候，他的高度是由他的子元素决定的，但是当子元素添加浮动后，会导致子元素脱离文档流，从而导致父级高度塌陷。

<template>
  <div>
    <div class="father">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.father{
  width: 200px;
  background: red;
}
.son{
  width: 50px;
  height: 10px;
  background: rosybrown;
  border:1px solid blue;
}
</style>

当前页面展示

当给子元素添加浮动后

<template>
  <div>
    <div class="father">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.father{
  width: 200px;
  background: red;
}
.son{
  width: 50px;
  height: 10px;
  background: rosybrown;
  border:1px solid blue;
  float: left;
}
</style>

页面：会导致父元素高度塌陷

解决方案：将父元素变成BFC内部子元素将不会影响外部元素

<template>
  <div>
    <div class="father">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.father{
  width: 200px;
  background: red;
  overflow: hidden;
}
.son{
  width: 50px;
  height: 10px;
  background: rosybrown;
  border:1px solid blue;
  float: left;
}
</style>

页面：

4.BFC可以阻止标准流元素被浮动元素覆盖

当一个元素添加浮动后，会脱离文档流，会覆盖其他元素。

<template>
  <div>
    <div class="item_1"></div>
    <div class="item_2"></div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.item_1 {
  width: 100px;
  height: 50px;
  background: red;
  float: left;
}
.item_2 {
  width: 200px;
  height: 50px;
  background: blue;
}
</style>

解决：将另一个元素变成BFC区域，第一个元素添加了浮动已经是一个BFC区域了，两个BFC区域相互独立，互不影响。

<template>
  <div>
    <div class="item_1"></div>
    <div class="item_2"></div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.item_1 {
  width: 100px;
  height: 50px;
  background: red;
  float: left;
}
.item_2 {
  width: 200px;
  height: 50px;
  background: blue;
  overflow: hidden;
}
</style>

页面：

四、总结

1.一个BFC区域只包含其子元素，不包括其子元素的子元素。

2.并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。

3.不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。

勇敢小陈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC块级格式化上下文

1.一个BFC区域只包含其子元素，不包括其子元素的子元素。2.并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。3.不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。
复制链接

扫一扫