BFC——块级格式化上下文
BFC(块级格式化上下文)
一、BFC是什么?
从样式上看,具有BFC的容器和普通的容器没有区别。从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有普通容器没有的一些特性,例如可以包含浮动元素,上文中的第二类清除浮动的方法(如overflow方法)就是触发了浮动元素的父元素BFC,使到它可以包含浮动元素,从而防止出现高度塌陷的问题。
简单来说,BFC就是一种属性。这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
二、BFC的触发
- 浮动元素:除了属性值为none的元素。
- position:absolute/fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible(hidden/scroll/auto)
- 根元素
三、BFC的特性
3.1 BFC阻止元素外边距折叠
两个相邻的元素margin会折叠。而当有BFC产生的时候,外边距不会叠加。
3.2 BFC 可以包含浮动的元素
这里就是之前提到的包裹性,这也正是使用 overflow: hidden 与 overflow: auto 方法闭合浮动的原理,使用 overflow: hidden 或 overflow: auto 触发浮动元素的父元素的 BFC 特性,从而可以包含浮动元素,闭合浮动。
W3C 的原文是“'Auto' heights for block formatting context roots”,也就是 BFC 会根据子元素的情况自动适应高度,即使其子元素中包括浮动元素。
3.3 BFC会阻止元素被浮动元素覆盖
3.3.1块级元素会被它的兄弟元素覆盖,触发了BFC的元素不会被它的兄弟浮动元素覆盖
3.3.2 父元素宽度不足以容纳一行中所有子元素时,非浮动子元素会下沉
四、BFC的运用
4.1 BFC实现自适应两栏布局
运用3.3.1触发了BFC的元素不会被兄弟浮动元素覆盖,那么我们只需要让右边的div触发BFC,左边的div进行left浮动。就可以实现效果啦~
4.2 BFC清除内部浮动
就像我们知道的一样,float属性会导致破坏,使父元素的高度“塌陷”。那我们可以利用BFC的3.2特性,是父亲元素产生BFC,这时候父亲元素的高度就会回来啦~
BFC——块级格式化上下文的更多相关文章
- CSS2系列:BFC(块级格式化上下文)IFC(行级格式化上下文)
BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...
- BFC块级格式化上下文
BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...
- BFC块级格式化上下文简述
做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...
- 我理解的BFC(块级格式化上下文)
BFC(Block formatting context) 直译为"块级格式化上下文". BFC它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Bl ...
- BFC(块级格式化上下文)
转载自:https://www.cnblogs.com/asheng2016/p/7281784.html https://blog.csdn.net/jiaojsun/article/details ...
- BFC(块级格式化上下文)笔记
BFC特性: 1.BFC是一个独立的布局容器,内部元素不会影响BFC外面的元素,反之亦然. 2.计算BFC高度时,会计算内部的浮动元素. 3.BFC会阻止外边距的合并. 4.BFC的区域不会与外部浮动 ...
- BFC(Box,Formatting,Context) —— 块级格式化上下文
Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...
- css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
- 详解块级格式化上下文(BFC)
相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...
随机推荐
- 简单使用metamascara
package.json 配置文件信息 { "name": "test-mascara", "version": "1.0.0&q ...
- day12 Python数字,字符串,列表,元祖,字典总结
一.数字 int() 二.字符串 replace/find/join/strip/startswith/split/upper/lower/format tempalte = "i am { ...
- Ubuntu触摸屏校准命令
1.sudo apt-get install utouch 2.sudo apt-get install xinput-calibrator 3.sudo xinput_calibrator(校准两次 ...
- MySQL(十一)视图及存储过程
一.视图 视图是虚拟的表,它只包含使用时动态检索数据的查询. 1.使用视图的好处 ①重用SQL语句: ②简化复杂的SQL操作(可以方便的重用它而不必知道它的基本查询细节): ③使用表的组成部分而不是整 ...
- 学习CSS布局 - box-sizing
box-sizing 人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性. 当你设置一个元素为 box-sizing: border-box; 时,此元素 ...
- BesLyric 全新版本下载 ( windows \ mac \ linux )
导读 BesLyric , 一款专门制作 网易云音乐 LRC 滚动歌词的软件! 搜索.下载.制作 歌词更方便! 很荣幸地,自 beslyric 2017 年开发推出以来,得到了很多云村村民的肯定,现在 ...
- SourceInsight工具增强——AStyle(代码格式化)、PC-Lint(静态检查)
Artistic Style(AStyle) AStyle是一款开源.高效.精简的代码格式化工具,适用于C.C++.C#.Java等.官方地址在:http://astyle.sourceforge.n ...
- 三、java三大特性--多态
面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已它的内部细节是隐藏的,暴露给外界的只是它的访问方法. 继承 ...
- IDM 破解
IDM确实好用,现贴出破解教程. 感谢原文作者:https://jingyan.baidu.com/article/11c17a2c2bd026f447e39d5a.html
- CF1056E Check Transcription 字符串哈希
传送门 暴力枚举\(0\)的长度,如果对应的\(1\)的长度也是一个整数就去check是否合法.check使用字符串哈希. 复杂度看起来是\(O(st)\)的,但是因为\(01\)两个数中数量较多的至 ...