块级格式化上下文(BFC)
一、什么是BFC
具有BFC属性的元素也属于普通流定位方式，与普通容器没有什么区别，但是在功能上，具有BFC的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且具有普通容器没有的一些特性，比如包含浮动元素，以防止出现高度塌陷问题。
总之，BFC就是一种属性，这种属性会影响着元素的定位及与其兄弟元素之间的相互作用。
二、BFC的用途
从整体上看，BFC是隔离了的容器：
1、BFC会阻止外边距折叠
折叠：两个相邻的盒子（可能是兄弟关系也可能是祖先关系）的垂直外边距可以合并成一个单独的垂直外边距。这种合并外边距的方式被称为折叠。
在同一个BFC中，两个相邻的块级元素在垂直方向上的外边距会发生叠加，具体的叠加规则如下：
- 当两个块级元素的外边距都为正数时，取较大者
- 当两个块级元素的外边距都为负数时，取较大者
- 当一正一负时，为两者的和
根据上面的定义可知，发生折叠的条件是：两个块级元素位于同一个BFC中，因而要阻止外边距折叠只需要产生新的BFC。
创建了BFC的元素，不和它的子元素发生外边距折叠。 因而如果同一级中的块级元素发生折叠情况(兄弟关系)，不能在元素本身上产生BFC属性，而应该给任意一个元素新建一个BFC容器(新增父级元素并设置为新的BFC，例如设置overflow:hidden;)。如果是祖先关系，则只需要触发父级BFC。
A、兄弟关系外边距折叠
<!--兄弟关系折叠-->
<head>
<style>
div:nth-child(1){
margin:20px;
}
div:nth-child(2){
margin:40px;
}
div:nth-child(3){
margin:20px;
}
</style>
</head>
<body>
<div style="width:100px;height:100px;background:#123;"></div>
<div style="width:100px;height:100px;background:#496;"></div>
<div style="width:100px;height:100px;background:#789;"></div>
</body>
/*兄弟关系阻止折叠方法*/
<head>
<style>
.newBFC{
margin:40px;
overflow: hidden;
}
</style>
</head>
<body>
<div style="width:100px;height:100px;background:#123;margin:20px;"></div>
<!-- newBFC类表示的仍然和上下两个div在同一个BFC容器中，因而仍旧会发生外边距折叠。不过其子元素已经位于另外一个BFC容器中，其与父元素的边距不会折叠 -->
<div class="newBFC">
<div style="width:100px;height:100px;background:#496;margin:20px;"></div>
</div>
<div style="width:100px;height:100px;background:#789;margin:20px;"></div>
</body>
B、祖先关系折叠
<!--外层div与内层div的垂直外边距margin合并了-->
<div style="margin:30px">
<div style="width:100px;height:100px;background:red;margin:30px"></div>
</div>
<!--将触发父级BFC属性，就不会合并垂直外边距了-->
<div style="margin:30px；overflow:hidden;">
<div style="width:100px;height:100px;background:red;margin:30px"></div>
</div>
2、BFC可以包含浮动元素
<div style="border:2px solid red;">
<div class="child" style="width:100px;height:100px;background:#565;"></div>
</div>
未给child加float属性前：
给child加float属性后：
从上面两个对比图可以发现，加了float属性后，包含child类的div脱离普通/标准文档流，外层div高度塌陷。
触发BFC
<div style="border:2px solid red;overflow: hidden;">
<div style="width:100px;height:100px;background:#565;float: right;"></div>
</div>
使用overflow: hidden;触发BFC属性，就可以承载具有float属性的元素了。
3、BFC可以阻止元素被浮动元素覆盖
浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发BFC后可以阻止这种情况的发生。经常在布局中使用。
<div style="width:100px;height:300px;background-color: #860;float: left;"></div>
<div style="width:400px;background-color: #395;">
<p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
<p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
<p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
</div>
触发BFC
<div style="width:100px;height:300px;background-color: #860;float: left;"></div>
<div style="width:400px;background-color: #395;overflow: hidden;">
<p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
<p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
<p>222</p><p>222</p><p>222</p><p>222</p><p>222</p><p>222</p>
</div>
三、如何触发BFC
- 浮动元素：float除none以外的值
- 绝对定位元素：position(absolute、fixed)
- display为以下其中之一的值inline-block、flex、inline-flex、table-cell、table-caption
- overflow除了visible以外的值(hidden、auto、scroll)
块级格式化上下文(BFC)的更多相关文章
- css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
- CSS2系列：BFC(块级格式化上下文)IFC(行级格式化上下文)
BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...
- BFC(Box,Formatting,Context) —— 块级格式化上下文
Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...
- BFC块级格式化上下文简述
做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...
- 详解块级格式化上下文（BFC）
相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...
- BFC块级格式化上下文
BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...
- 基础总结（02）--BFC（块级格式化上下文）
BFC(块级格式化上下文)布局规则 1.元素垂直排列. 2.同一个BFC相邻两个元素的margin会重叠. 3.BFC区域不会与浮动元素重叠. 4.BFC就是页面上的一个隔离的独立容器,容器里面的子元 ...
- BFC——块级格式化上下文
BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...
- 我理解的BFC(块级格式化上下文)
BFC(Block formatting context) 直译为"块级格式化上下文". BFC它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Bl ...
随机推荐
- redis主从复制,哨兵以及集群搭建部署
redis主从复制 1.redis支持多实例的功能,一台机器上,可以运行多个单个的redis数据库 环境准备,运行3个redis数据库,达到 1主 2从的配置 主库 6379.conf port 63 ...
- 任意文件夹打开CMD命令窗口
1:打开任意文件夹 2:按住Shift键,鼠标右键单击 3:该文件夹下的命令窗口已打开,方便快捷
- MailKit和MimeKit 收发邮件
新建项目,引用MailKit和MimeKit NuGet包 using CommonTool.MailKit; using System; using System.Collections.Gener ...
- sklearn中predict_proba的用法例子(转)
predict_proba返回的是一个n行k列的数组,第i行第j列上的数值是模型预测第i个预测样本的标签为j的概率.所以每一行的和应该等于1. 举个例子 >>> from sklea ...
- 安装xpath helper方便进行爬虫
安装xpath helper方便进行爬虫 因为我使用的是edge浏览器,扩展商店搜索不到xpath-helper,但是我不甘心,取下载源扩展直接放在edge中试试 下载XPath helper的源码 ...
- JZ-026-二叉搜索树与双向链表
二叉搜索树与双向链表 题目描述 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 题目链接: 二叉搜索树与双向链表 代码 /** * ...
- Azure DevOps (三) 实现和Jenkins的联动
上一篇文章中,我们通过azure 的webhook实现了和钉钉机器人的联动,实现了通过钉钉机器人告知大家刚才谁动了仓库. 在文章开篇的时候我们举例说了jenkins也可以实现和azure联动,今天我们 ...
- 【一周聚焦】 联邦学习 arxiv 2.16-3.10
这是一个新开的每周六定期更新栏目,将本周arxiv上新出的联邦学习等感兴趣方向的文章进行总结.与之前精读文章不同,本栏目只会简要总结其研究内容.解决方法与效果.这篇作为栏目首发,可能不止本周内容(毕竟 ...
- laravel7文件上传至七牛云并保存在本地图片
HTML代码: <form class="layui-form" action="{{route('doctor.store')}}" method=&q ...
- elasticsearch高亮之highlight原理
一.highlight简介 highlight是提升用户体验的重要手段,搜索引擎通过高亮突出命中关键字等方式,方便用户通过关键字周围的信息快速的确认是否是自己希望的结果: highlight功能通常包 ...