CSS BFC(格式化上下文)深入理解
什么是BFC
在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。常见的FC有BFC、IFC,还有GFC和FFC。BFC是block formatting context,也就是块级格式化上下文,是用于布局块级盒子的一块渲染区域
触发条件
满足下列条件之一就可触发BFC
1、根元素,即HTML元素
2、float的值不为none
3、overflow的值不为visible
4、display的值为inline-block、table-cell、table-caption
5、position的值为absolute或fixed
作用
BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然。它与“普通的块框”类似,但不同之处在于:
1、可以阻止元素被浮动元素覆盖
2、可以包含浮动元素
3、属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠,(设置writing-mode:tb-rl时,水平margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠
【1】可以阻止元素被浮动元素覆盖
效果展示:
通过改变内容为BFC,背景为浅绿色的盒子的属性,使其成为BFC,以此阻止被深绿色的浮动盒子覆盖
【2】可以包含浮动元素
效果展示:
操作天蓝色区域的属性,使其成为BFC。就可以包含住浮动元素
【3】属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠,(设置writing-mode:tb-rl时,水平margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠
效果展示:
深红色背景的块级盒子二的外面包一个div,通过改变此div的属性使红色盒子与绿色盒子分属于两个不同的BFC,以此来阻止margin重叠
CSS BFC(格式化上下文)深入理解的更多相关文章
- css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
- CSS的两种格式化上下文:BFC和IFC
CSS的两种格式化上下文 文章包含很多个人理解,如果错误,欢迎指出~ 在看本文之前,你要对CSS的盒子模型,Block-Level元素,Inline-Level元素有所了解,具体可参考CSS的 ...
- BFC(块级 格式化上下文)的理解
本文转载(https://segmentfault.com/a/1190000013647777) 一.BFC的概念 1.规范解释 块格式化上下文(Block Formatting Context,B ...
- css 块级格式化上下文(BFC)
一.块级格式化上下文(BFC) 1.什么是块级格式化上下文? Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则 (可以把 BFC 理解为 ...
- 我理解的BFC(块级格式化上下文)
BFC(Block formatting context) 直译为"块级格式化上下文". BFC它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Bl ...
- 深入理解css BFC 模型
如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...
- CSS2系列:BFC(块级格式化上下文)IFC(行级格式化上下文)
BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...
- 详解块级格式化上下文(BFC)
相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...
- BFC块级格式化上下文
BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...
随机推荐
- 多线程——multiprocess
先看个误打误撞的写的代码 import os import time import multiprocessing def func(): print('我是func函数1','现在的father进程 ...
- flink Standalone Cluster
Requirements Software Requirements Flink runs on all UNIX-like environments, e.g. Linux, Mac OS X, a ...
- web框架开发-快速认识Django中间件
中间件 中间件的概念 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出. 因为改变的是全局,所以需要谨慎实用,用不 ...
- fastjson List转JSONArray以及JSONArray转List
1.fastjson List转JSONArrayList<T> list = new ArrayList<T>();JSONArray array= JSONArray.p ...
- 20145236《网络对抗》进阶实验——64位Ubuntu 17.10.1 ROP攻击
20145236<网络对抗>进阶实验--64位Ubuntu 17.10.1 ROP攻击 基础知识 ROP攻击 ROP全称为Retrun-oriented Programmming(面向返回 ...
- Jmeter名词注解
取值 ${ip}排除 .*\.js .*\.css .*\.png .*\.gif .*\.msp .*\.js 提取值 (.+?) (.*?)[() 括起来的部分就是需要提取的,对于你要提的内容需要 ...
- Educational Codeforces Round 62 (Rated for Div. 2) - C Playlist
当时题意看错了...不过大致思路是对的,唯一没有想到的就是用优先队列搞这个东西,真是不该啊... 题意大概就是,有N首歌,N首歌有两个东西,一个是长度Ti,一个是美丽值Bi,你最多可以选择K首歌, 这 ...
- [官网]Using PuTTY
Previous | Contents | Next Chapter 3: Using PuTTY Section 3.1: During your session Section 3.1.1: Co ...
- Shell命令-文件及目录操作之pwd、rm
文件及目录操作 - pwd.rm 1.pwd:显示当前所在位置信息 pwd命令的功能说明 pwd命令用于显示当前工作目录的绝对路径,以便在各个目录间来回切换. pwd命令的语法格式 pwd [OPTI ...
- Building Forms with PowerShell – Part 1 (The Form)
For those of you familiar with Scripting languages you are probably used to using alternate applicat ...