BFC(块级格式化上下文)

什么是BFC

指的是一个块级渲染作用域,该区域内拥有一套完整的规则来约束块级盒子的布局,且与区域外部无关.

为什么要使用BFC

当一个盒子不设置高度,当其中的子元素都浮动时,这个盒子便无法撑起自身.

这个问题可以使用BFC来解决,形成一个块级格式化上下文.

那么如何创建BFC

  • float的值不为none

  • position的值不为static或relative

  • display的值为inline-block,flex,inline-flex

  • 设置overflow:hidden

BFC的其他作用

  • 取消盒子的margin塌陷

    如图所示,父元素盒子不做设置,当子盒子设置margin-top后,父元素盒子也会随之变化.

    此时给父元素设置overflow:hidden创建块级格式化上下文可以有效解决margin塌陷问题

  • 清除浮动

如图所示,当父盒子中有元素浮动,有元素不浮动时,不浮动的元素会出现在浮动元素下方此时给浮动元素设置overflow:hidden可以清除浮动,显示出不浮动元素.

当然清除浮动还有其他几种方法,这些后续再谈
了解更多，去我博客 Plumli看看叭

了解前端中的BFC(块级格式化上下文)的更多相关文章

  1. BFC——块级格式化上下文

    BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...

  2. CSS2系列：BFC(块级格式化上下文)IFC(行级格式化上下文)

    BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...

  3. BFC块级格式化上下文

    BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...

  4. BFC块级格式化上下文简述

    做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...

  5. 我理解的BFC(块级格式化上下文)

    BFC(Block formatting context) 直译为"块级格式化上下文". BFC它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Bl ...

  6. 理解CSS中的BFC(块级可视化上下文)[译]

    开篇 一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元 ...

  7. BFC(块级格式化上下文)

    转载自:https://www.cnblogs.com/asheng2016/p/7281784.html https://blog.csdn.net/jiaojsun/article/details ...

  8. BFC(块级格式化上下文)笔记

    BFC特性: 1.BFC是一个独立的布局容器,内部元素不会影响BFC外面的元素,反之亦然. 2.计算BFC高度时,会计算内部的浮动元素. 3.BFC会阻止外边距的合并. 4.BFC的区域不会与外部浮动 ...

  9. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  10. BFC(Box,Formatting,Context) —— 块级格式化上下文

    Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...

随机推荐

  1. day15:递归函数&递归练习题

    递归函数 递归函数的定义 : 自己调用自己的函数就是递归 递: 去    归: 回   一去一回就是递归 一个简单的递归例子 # 1.一个简单的递归例子 def digui(n): print(n,& ...

  2. 部署：keepalived-1.3.5+MHA部署mysql集群

    MHA: MHA工作原理总结为以下几条: 从宕机崩溃的master保存二进制日志事件(binlog events): 识别含有最新更新的slave: 应用差异的中继日志(relay log)到其他sl ...

  3. ChatGPT API接口编程基础与使用技巧

    总结/朱季谦 趁着这周末空闲时间,在研读完OpenAi官网文档的基础上,及时总结了这篇<ChatGPT API接口编程基础与使用技巧>. 本文大部分内容是围绕编程方面,包括ChatGPT模 ...

  4. R的基本用法

    R变量的命名格式 必须以字母开头 只能包含字母.数字.下划线和.. 对大小写敏感 不能是保留关键字 数据类型(mode) numeric - (10.5, 55, 787) integer - (1L ...

  5. css实现文本溢出省略号

    CSS常用属性: overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行,只 ...

  6. Win Airtest + 夜神模拟器 实现APP自动化

    前言: Airtest 是一个跨平台的UI自动化测试框架,适用于游戏和App.目前支持Windows.Android平台和 iOS 平台. 一.下载Airtest 下载地址:https://airte ...

  7. 文心一言 VS chatgpt （16）-- 算法导论4.1 1~2题

    一.当A的所有元素均为负数时,FIND-MAXIMUM-SUBARRAY返回什么? 文心一言: 当A的所有元素均为负数时,FIND-MAXIMUM-SUBARRAY返回-1. 这是因为在二进制中,当所 ...

  8. 2023-05-05：给定一个无向、连通的树 树中有 n 个标记为 0...n-1 的节点以及 n-1 条边 。 给定整数 n 和数组 edges ， edges[i] = [ai, bi]表示树中的

    2023-05-05:给定一个无向.连通的树 树中有 n 个标记为 0...n-1 的节点以及 n-1 条边 . 给定整数 n 和数组 edges , edges[i] = [ai, bi]表示树中的 ...

  9. 2023-04-16：给定一个长度为N的数组，值一定在0~N-1范围，且每个值不重复 比如，arr = [4, 2, 0, 3, 1] 0 1 2 3 4 把0想象成洞

    2023-04-16:给定一个长度为N的数组,值一定在0~N-1范围,且每个值不重复 比如,arr = [4, 2, 0, 3, 1] 0 1 2 3 4 把0想象成洞,任何非0数字都可以来到这个洞里 ...

  10. pg数据库的备份和恢复以及sql脚本错误的解决方法

    1.备份单库单表的数据,以insert语句的方式 pg_dump -h IP -p 端口 -U 用户名 -t 表名 --inserts –f dbname.sql 数据库名 pg_dump -h 17 ...