CSS中的BFC是什么?

一、什么是BFC?

BFC(Block Formatting Context)块格式化上下文,简单来说就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

二、如何触发BFC?

我们经常在写CSS时不知不觉就会触发了BFC:

  • 根元素,即HTML元素
  • 浮动元素:元素的float不是none,指定float为left或者right就可以创建BFC
  • 绝对定位元素:元素的position为absolute或fixed
  • display:inline-block、table-cell、flex、inline-flex
  • overflow指定除了visible的值

三、BFC有什么特点?

  • 在BFC中,块级元素从顶端开始垂直地一个接一个的排列。(当然了,即便不在BFC里块级元素也会垂直排列)
  • 如果两个块级元素属于同一个BFC,它们的上下margin会重叠(或者说折叠),以较大的为准。但是如果两个块级元素分别在不同的BFC中,它们的上下边距就不会重叠了,而是两者之和。
  • BFC的区域不会与浮动的元素区域重叠,也就是说不会与浮动盒子产生交集,而是紧贴浮动边缘。
  • 计算BFC的高度时,浮动元素也参与计算。BFC可以包含浮动元素。(利用这个特性可以清除浮动)
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

四、BFC有什么用?

1、解决外边距折叠问题

可以把其中一个div放到BFC中,添加overflow: hidden;开启BFC

2、制作两栏布局

左边固定,右边自适应------> 给右边的div添加overflow: hidden;开启BFC

3、清除元素内部的浮动

当在父元素中只设定一个盒子浮动,另一个不浮动时,会造成第二个盒子在第一个盒子的下方,被覆盖掉一部分

给第二个元素设置BFC:overflow: hidden;

原文链接:https://blog.csdn.net/weixin_43974265/article/details/115416184

相关推荐
IT_陈寒26 分钟前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode14 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu14 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript