css中的bfc是什么?

什么bfc?

BFC(Block Formatting Context)块级 格式化 上下文。

BFC就是页面上的一个隔离的独立盒子,容器里面的子元素和外面的元素不会相互影响。

为什么要bfc?

bfc是我们去主动触发的,并不是自动就存在的,它是帮助我们解决css样式的一种方法,它不是一个问题,不是要求我们要怎么去解决bfc问题。

bfc可以用来解决什么问题?

  1. 解决外边距折叠问题
javascript 复制代码
.wrapper{
  /* 开启BFC */
  //overflow: hidden;
}
.div1 {
  width: 100px;
  height: 100px;
  background-color: green;
  margin-bottom: 20px;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 20px;
}

    <div class="wrapper">
        <div class="div1"></div>
    </div>
    <div class="wrapper">
        <div class="div2"></div>
    </div>

这里的外边距就重合了,正常来说应该是40px的,但这里只有20px;这时就可以给父盒子设置overflow: hidden;这样就会触发bfc规则,这样两个盒子的距离就是40px了。

  1. 清除元素内部的浮动
    这里清除浮动的意思并不是清除你设置的元素的浮动属性,而是清除设置了浮动属性之后给别的元素带来的影响。例如我们给子元素设置浮动,那么父元素的高度就撑不开了。

BFC有一个特性:计算BFC的高度时,浮动元素也参与计算,利用这个特性可以清除浮动。

javascript 复制代码
<div class="div1">
  <div class="son1">a</div>
  <div class="son2">b</div>
</div>

.div1 {
  width: 150px;
  border: 1px solid red;

  /*使用BFC来清除浮动,三选一都行*/
   overflow: hidden;
  // float: left;
  // position: fixed;
  
}

.son1, .son2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: left;
}

.son2 {
  background-color: greenyellow;
}

总结:怎么创建bfc规则

  • 给元素设置浮动:float:left,right
  • 给元素设置定位:fixed,absolute
  • 给元素设置overflow值不为 visible
    对的,就是直接给元素设置这些中的某个属性,就可以让盒子成为具有bfc规则的盒子。
相关推荐
夜熵几秒前
JavaScript 中的 this
前端·面试
前端小巷子3 分钟前
CSS 单位指南
前端·css
St3 分钟前
探索JavaScript原型链设计——详解prototype、__proto__及constructor三者之间的关系
前端·javascript
前端大白话4 分钟前
JavaScript中`Symbol.for()`和`Symbol()`的区别,在创建全局唯一的`Symbol`值时如何选择使用?
前端·javascript·设计模式
喵爱吃鱼4 分钟前
原来这就是react设计模式啊
前端·javascript·react.js
前端大白话6 分钟前
前端必看!90% 工程师踩过的状态管理坑,useReducer 如何一招化解?
前端·javascript·react.js
前端大白话6 分钟前
揭秘 HTML 可拖动元素及拖放功能:HTML5 API 大起底
前端·javascript·html
Moment23 分钟前
通过爬取 B 站热门视频来带你彻底了解 Playwright 🤷🏿‍♂️🤷🏿‍♂️🤷🏿‍♂️
前端·javascript·后端
Java~~39 分钟前
山东大学软件学院项目实训-基于大模型的模拟面试系统-前端美化滚动条问题
前端
掘金安东尼1 小时前
🧭 前端周刊第411期(2025年4月21日–27日)
前端·javascript·面试