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规则的盒子。
相关推荐
用户4081281200381几秒前
eval执行字符串
前端
用户4081281200381几秒前
argument对象是什么
前端
拾光拾趣录2 分钟前
Webpack性能优化:10个杀手级提速技巧
前端·webpack·turbopack
颜漠笑年8 分钟前
可迭代对象≠数组,一起来揭开for...of背后隐藏的秘密吧
前端·javascript
GIS之路8 分钟前
GeoTools 数据模型
前端
拾光拾趣录9 分钟前
Vue中v-if与v-for同元素使用的陷阱
前端·vue.js
拾光拾趣录9 分钟前
浏览器存储:从Cookie到IndexedDB
前端·浏览器·indexeddb
拾光拾趣录10 分钟前
前端静态资源本地缓存:从秒开到省流量
前端·性能优化·浏览器
脑袋大大的1 小时前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君011 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习