深入理解BFC
来源:互联网 发布:plmn 移动网络 编辑:程序博客网 时间:2024/06/03 09:59
深入理解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】可以阻止元素被浮动元素覆盖
<说明>通过改变内容为BFC背景为红色的盒子的属性值,使其成为BFC,以此阻止被绿色的浮动盒子覆盖
【2】可以包含浮动元素
<说明>通过改变高度塌陷的黑色边框的盒子的属性值,使其成为BFC,以此来包含绿色的浮动盒子
【3】属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠,(设置writing-mode:tb-rl时,水平margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠
<说明>淡红色背景的块级盒子二的外面包一个div,通过改变此div的属性使红色盒子与绿色盒子分属于两个不同的BFC,以此来阻止margin重叠
- 一起深入理解BFC~
- 深入理解BFC
- 深入理解BFC
- 【深入理解CSS】BFC详解
- 深入理解css BFC 模型
- 【转】深入理解BFC和Margin Collapse
- 深入理解BFC和Margin Collapse
- 深入理解BFC和Margin Collapse
- 深入理解BFC和Margin Collapse
- 深入理解BFC和Margin Collapse
- 深入理解BFC和Margin Collapse
- 深入理解BFC和Margin Collapse
- 深入理解BFC和外边距合并(Margin Collapse)
- [布局概念]关于CSS-BFC的深入理解
- 深入理解盒子模型——CSS之BFC详解
- 理解css的BFC
- 初步理解BFC
- 理解CSS中BFC
- tslib 编译移植步骤
- android studio 使用本地gradle的配置
- AES,RSA,ECC加密算法实现
- 对称加密----AES和DES加密、解密
- 安装Pangolin遇到问题解决
- 深入理解BFC
- 简单介绍 Dolby Pro Logic II
- hadoop:IDEA本地编写mapreducer的wordcount并测试,并上传到hadoop的linux服务器进行测试
- 基于libRTMP的流媒体直播之 AAC、H264 推送
- WebView
- 人工智能相关汇总
- Spring思维导图,让spring不再难懂(一)
- Server Tomcat v9.0 Server at localhost failed to start.误删文件导致启动失败
- FMI飞马网 | 了解人工智能,30份书单不容错过(附电子版PDF下载)