关于css中bfc的理解

首先需要了解的是bfc的缩写是block formatting context 块级格式化上下文

那么块级格式化上下文意味着我们在bfc的区域内生成了一块独立于当前文本流的样式、它不受外界样式的影响、有着专属于自己的样式。

基于这样的定义我们可以避免一些样式冲突、在我们开发者面对复杂布局时可以更加从容的应对,

与bfc对应的是我们的ifc布局即内联式样式布局,以垂直竖列进行布局,不会生成新的块级容器

以上是对于bfc的理解

那么bfc是在什么特定情况下生成呢,或者换句话说开发的过程中需要怎么操作,可以借助我们的bfc从容面对我们复杂的布局呢

  1. 根元素:即HTML文档的顶级元素。
  2. 浮动元素 :元素的float属性值不是none
  3. 绝对定位元素 :元素的position属性值为absolutefixed
  4. 行内块元素 :元素的display属性值为inline-block
  5. 表格单元格 :元素的display属性值为table-cell
  6. 表格标题 :元素的display属性值为table-caption
  7. display值为flow-root的元素:这会创建一个新的块格式化上下文。
  8. overflow值不为visible的块元素 :即元素的overflow属性值为hiddenautoscroll
  9. flex容器 :即元素的display属性值为flexinline-flex

ps不是所有的display都会导致bfc

这边除了none block inline

相关推荐
火柴就是我2 分钟前
每日见闻之Three.js 根据官方demo 理解相机位置
前端
JosieBook11 分钟前
【web应用】基于Vue3和Spring Boot的课程管理前后端数据交互过程
前端·spring boot·交互
刘大猫.18 分钟前
npm ERR! cb() never called!
前端·npm·node.js·npm install·npmm err·never called
咔咔一顿操作22 分钟前
常见问题三
前端·javascript·vue.js·前端框架
上单带刀不带妹24 分钟前
Web Worker:解锁浏览器多线程,提升前端性能与体验
前端·js·web worke
电商API大数据接口开发Cris40 分钟前
Node.js + TypeScript 开发健壮的淘宝商品 API SDK
前端·数据挖掘·api
还要啥名字42 分钟前
基于elpis下 DSL有感
前端
一只毛驴1 小时前
谈谈浏览器的DOM事件-从0级到2级
前端·面试
用户8168694747251 小时前
封装ajax
前端
pengzhuofan1 小时前
Web开发系列-第13章 Vue3 + ElementPlus
前端·elementui·vue·web