面试官:我让你翻译翻译,什么叫BFC!

前言

BFC (Blcok formatting context) 意思是块级格式化上下文。他是一个独立的渲染区域。BFC会影响 当前元素和内部元素的布局,但不会影响跟外部元素之间的关系。

如何创建BFC容器

  1. overflow属性:将一个元素属性设置为非visible就会创建一个BFC容器
  2. display属性:inline-block,table-cell,table-caption和flex属性,就会是一个BFC容器
  3. position属性:设置为absolute或fixed
  4. float属性:设置为left或right

以上就是主要的几个创建BFC容器的方法。

BFC可以解决哪些问题?

1. 垂直方向上margin的合并

当父容器内包裹一个子容器,分别给父容器和子容器设置一个margin-top。

js 复制代码
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
        margin-top: 100px;
    }

    .box-son {
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-top: 30px;
    }
</style>

你就会发现子容器的margin-top并没有效果,子容器依旧是贴着父容器的,甚至于我们不断的修改这个margin-top的值,只要不超过父容器的100px都是没有效果的。而且当我们设置子容器的margin-top大于父容器的时候,这个margin-top却依旧像是作用在父容器身上。这个就是margin的塌陷和合并。

  1. margin塌陷:当子元素的垂直方向上的margin大于父元素的margin时(包括父元素不设置margin的情况),子元素的margin会设置到父元素身上
  2. margin合并:父元素垂直方向上的margin大于子元素的,就会导致子元素的垂直方向上margin不生效。

解决方案:我们只需要将父元素设置为一个BFC容器即可。(给父元素设置overflow:hidden或别的方法)

2. 高度塌陷问题

当父元素不设置高度而子元素浮动时,父元素就会发生高度塌陷,父元素的高度变为0

我们能看到父元素的高度为0,但是我们能看到子元素。 解决方案:我们只需要将父元素设置为一个BFC容器即可。

3.避免和浮动元素重叠

两个同级的div,这里蓝色盒子设置浮动后把粉色盒子盖住了,如果我们不想让粉色盒子被蓝色盒子盖住的话。

解决方案:我们只需要将粉色盒子设置为一个BFC容器即可。

尾声

BFC我们只需要记住它最大的一个特点,他是一个独立的渲染区域,它规定死了它内部块级元素一个盒子一个盒子不重叠地垂直排列,且外部元素无法影响他。

相关推荐
一只叫煤球的猫14 分钟前
手撕@Transactional!别再问事务为什么失效了!Spring-tx源码全面解析!
后端·spring·面试
foxhuli22933 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript