简单聊聊BFC

BFC：（Block Formatting Context）块级格式化上下文

官方给出的解释可以看：MDN

BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素，反之也是如此

 

产生BFC的方式是：则满足下列的任意一个或多个条件即可： 下列方式会创建块格式化上下文：

1、使用给父元素使用 overflow 

2、在父级块中使用 display: flow-root 可以创建新的 BFC。

  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • overflow 值不为 visible 的块元素
  • 弹性元素（display为 flex 或 inline-flex元素的直接子元素）

 

BFC的功能是：

1、让BFC内部的子元素清除浮动

2、让浮动元素之间避免外边距重叠

3、BFC是一个独立的容器，外面的元素不会影响里面的元素

应用场景：

一：防止浮动导致父元素高度坍塌

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

.father{
  border: 1px solid red;
  min-height: 20px;
}

.son {
  background: blue;
  height: 100px;
}

 结果是：

 

当给子元素加上一个 float 后 position:absolute时，就会脱离文档流

.son {
  background: blue;
  width: 150px;
  height: 100px;
  float:left;
  /* position: absolute; */
}

结果是：

 

 此时我们让父元素产生一个BFC，就会让父元素包裹住子元素

.father{
  border: 1px solid red;
  min-height: 20px;
  overflow:hidden;
}

注意：在使用（overflow：hidden）时，它有多种用处：清除浮动，溢出隐藏、解决外边距塌陷

 

 二：让浮动元素间产生边距

<body>
 <div class="left"></div>
 <div class="right"></div>
</body>

div {
  border: 3px solid black;
}

.left {
  min-width: 200px;
  height: 29px;
  margin-right: 20px;
  float: left;
}

.right {
  border-color: green;
  height: 29px;
}

从代码里看出，想让左边的left的div元素产生20px的外边距，结果却是：

 

 想要解决这种问题，除了在right 的div元素上添加margin-left上添加 浮动元素的宽度+边距外，还可以让right的div元素产生BFC

.right {
  border-color: green;
  height: 29px;
  display: flow-root;
}

结果：在应用 display:flow-root 声明后，都会变成块级元素，同时这个元素会建立新的块级格式上下文，也就是BFC。让两个元素之间独立隔开

 

posted @ 2021-03-22 16:40  蛰鸣  阅读(53)  评论(0)  编辑  收藏  举报