位置: IT常识 - 正文

前端中的BFC是什么?(前端bs是什么)

编辑:rootadmin
前端中的BFC是什么? BFC的概念

推荐整理分享前端中的BFC是什么?(前端bs是什么),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端cbd,前端bff架构,前端bp是什么意思,bfe 前端,前端bs是什么,前端buffer,前端bff架构,前端bff架构,内容如对您有帮助,希望把文章链接给更多的朋友!

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

MDN给出的解释是:BFC是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

相信这样讲还是很抽象,下面用代码来实现一下,就能明白了

产生BFC的方式float的值不为none。position的值不为static或者relative。display的值是inline-block、table-cell、flex、table-caption或者inline-flexoverflow的值不为visibleBFC的规则BFC就是一个块级元素,块级元素会在垂直方向一个接一个的排列BFC就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签垂直方向的距离由margin决定, 属于同一个BFC的两个相邻的标签外边距会发生重叠计算BFC的高度时,浮动元素也参与计算BFC的作用1. 解决高度坍塌

在一个没有高度的div内,嵌套了一个设置浮动的div,会出现下面的情况

外层div出现了高度坍塌的现象,这时候给它加上一个overflow: hidden的css属性,就产生了BFC

前端中的BFC是什么?(前端bs是什么)

就解决高度坍塌的问题了

2. 解决margin重叠问题

 里面的三个div都设置了margin: 10px,但是网页中的相邻的div之间距离也是10px,原因就是同一个BFC容器内的兄弟元素会产生垂直方向上的margin重叠,,会取两个相邻元素之间最大的marign作为之间的间隔。

可以通过给每个子元素包裹一个BFC容器来解决。

 3. 阻止元素被浮动元素覆盖

有两个同级的div元素,前面div的设置了左浮动,会覆盖住后面的元素

 这时让未设置浮动的元素产生BFC,就可以避免被浮动元素覆盖

结语

块格式化上下文对浮动定位和清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间。

以上就是BFC的分析,BFC的概念比较抽象,但通过实例分析应该能够更好地理解BFC。在实际中,利用BFC可以闭合浮动。同时,由于BFC的隔离作用,可以利用BFC包含一个元素,防止这个元素与BFC外的元素发生margin collapse。

参考

   https://blog.csdn.net/weixin_44165167/article/details/115617978

本文链接地址:https://www.jiuchutong.com/zhishi/298792.html 转载请保留说明!

上一篇:BERT模型基本理念、工作原理、配置讲解(图文解释)(bert模型能做什么)

下一篇:OpenCV之 BGR、GRAY、HSV色彩空间&色彩通道专题 【Open_CV系列(三)】

  • vivox70pro+怎么设置相册密码(vivox70pro怎么设置双击亮屏)

    vivox70pro+怎么设置相册密码(vivox70pro怎么设置双击亮屏)

  • 小米的其他文件是什么东西(小米的其他文件在哪里)

    小米的其他文件是什么东西(小米的其他文件在哪里)

  • vivos6有红外线功能吗(vivos6红外线功能手机怎么打开)

    vivos6有红外线功能吗(vivos6红外线功能手机怎么打开)

  • 无法认证服务器身份是怎么回事(无法认证服务器苹果手机身份)

    无法认证服务器身份是怎么回事(无法认证服务器苹果手机身份)

  • 苹果xr拍照有夜景模式吗(苹果xr拍照夜间模式怎么开启)

    苹果xr拍照有夜景模式吗(苹果xr拍照夜间模式怎么开启)

  • 笔记本长时间不用有什么危害(笔记本长时间不用)

    笔记本长时间不用有什么危害(笔记本长时间不用)

  • AMDcpu后缀含义(amdcpu后缀字母含义)

    AMDcpu后缀含义(amdcpu后缀字母含义)

  • 抖音直播闪退是什么原因(抖音直播闪退是什么意思)

    抖音直播闪退是什么原因(抖音直播闪退是什么意思)

  • 群聊怎么艾特所有人(群聊怎么艾特所有人员)

    群聊怎么艾特所有人(群聊怎么艾特所有人员)

  • 微信被禁言多久可以恢复正常(微信被禁言多久能好)

    微信被禁言多久可以恢复正常(微信被禁言多久能好)

  • 钉钉手机和平板可以同时使用吗(钉钉手机跟ipad)

    钉钉手机和平板可以同时使用吗(钉钉手机跟ipad)

  • adc芯片是什么(国产adc芯片)

    adc芯片是什么(国产adc芯片)

  • .eps用什么软件打开(eps软件使用方法)

    .eps用什么软件打开(eps软件使用方法)

  • vivos1有快充吗(vivos1有快充功能吗)

    vivos1有快充吗(vivos1有快充功能吗)

  • 笔记本运行慢如何解决(笔记本运行慢如何设置)

    笔记本运行慢如何解决(笔记本运行慢如何设置)

  • 华为p30pro和mate30对比(华为p30pro和mate30哪个好)

    华为p30pro和mate30对比(华为p30pro和mate30哪个好)

  • 手机支付宝红包没有余额宝红包怎么用(手机支付宝红包怎么找)

    手机支付宝红包没有余额宝红包怎么用(手机支付宝红包怎么找)

  • wps怎么删除表格线条(wps怎么删除表格下面的行)

    wps怎么删除表格线条(wps怎么删除表格下面的行)

  • vue可以添加多个贴纸吗(vue添加多个标签)

    vue可以添加多个贴纸吗(vue添加多个标签)

  • soul怎么看谁访问过我(soul怎么看谁看过我)

    soul怎么看谁访问过我(soul怎么看谁看过我)

  • 电脑上视频怎么旋转(电脑上视频怎么原画质传到手机)

    电脑上视频怎么旋转(电脑上视频怎么原画质传到手机)

  • xr分辨率很低吗(xr分辨率是多少p)

    xr分辨率很低吗(xr分辨率是多少p)

  • 快手里的黄钻是干嘛的(快手里的黄钻是真的吗)

    快手里的黄钻是干嘛的(快手里的黄钻是真的吗)

  • mqa82xa是什么版本

    mqa82xa是什么版本

  • 王者荣耀中白起技能有哪些?(王者荣耀中白起的台词)

    王者荣耀中白起技能有哪些?(王者荣耀中白起的台词)

  • MAC系统中如何隐藏Dock上的程序图标(mac怎么隐藏app)

    MAC系统中如何隐藏Dock上的程序图标(mac怎么隐藏app)

  • 小规模纳税人增值税减免账务处理
  • 房地产印章图片
  • 个人所得税征收标准表
  • 服务费发票的税率是多少
  • 企业所得税季度申报
  • 个人经营所得税减免税优惠政策
  • 专用发票上的码头堆存费等进项税可否抵扣?
  • 抵债资产涉税问题
  • 小规模纳税人计提增值税
  • 17%增值税发票怎么计算成13%
  • 车间管理人员工资总额占车间工资总额的10%
  • 建筑企业如何进行资质申请?
  • 季度所得税预缴可以弥补以前年度亏损吗
  • 文化传媒公司的经营模式怎么写
  • 商标是按年交费的吗
  • 技术转让免征增值税
  • 建筑业甲供工程税率
  • 食堂固定资产管理制度
  • 平销返利税率
  • 辅助生产费用的核算
  • 补记以前年度收入分录
  • win10 2004 2009
  • 为员工购买的团员保险
  • win7为什么没有本地连接
  • 免抵退税的具体计算方法
  • 虚拟机不能互相访问
  • 建设期需要流动资金吗
  • 基于php技术
  • 申请高新技术企业的好处
  • 小规模纳税人应纳增值税额的计算
  • 前端解决跨域问题的8种方案(最新最全)
  • 分享项目成果
  • sklearn average precision
  • 用css画一个扇形
  • 银行承兑汇票记入会计科目
  • 应交增值税科目设置及账务处理
  • 收到借款利息收入的会计分录怎么做账
  • 个人去开票要交税吗
  • 农副产品普通发票可以抵扣增值税吗
  • 营改增的不利影响
  • 交付使用资产是否含税
  • 销售商品开票税目
  • 去年亏损今年盈利同比怎么算
  • 固定资产补缴增值税怎么做帐务处理
  • 企业投资期货亏损能抵税么
  • 现金日记账和银行日记账必须逐月结出余额
  • 取得虚开
  • 百旺购货方红字信息表怎么开具
  • 行政事业单位预算一体化账务处理
  • 一般纳税人拿到普票怎么处理账务
  • 没有什么费用
  • 租办公楼有什么讲究
  • 办土地证费用会退吗
  • ubuntu16.04lts
  • usb3.0接口可以插优盘吗
  • win7偶尔黑屏
  • 在pc上安装了hp网络打印机需要注意什么
  • windows8 enterprise
  • xp系统怎么关闭更新系统
  • 怎么解圧
  • win8页面
  • cocos2dx4.0教程
  • cocos2dx node
  • ExtJS中设置下拉列表框不可编辑的方法
  • nodejs和mysql
  • python3 args
  • node的使用场景
  • AppWidgetProvider使用介绍
  • jquery获取元素的父元素
  • python读取图片属性
  • 原生js实现移动站点头部搜索栏背景色透明度变化
  • 福建省国家税务局网
  • 现在哪个行业的税负很重了
  • 北京市国家税务局
  • 江苏税务查询授权验证码
  • 农机免税范围
  • 电子发票查询平台电话
  • 北京摇号摇中了能过户吗
  • 长春市朝阳区公安局电话
  • 土地面积测量
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设