块级格式化上下文(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 ...
随机推荐
- mapreduce—shuffle图解
- Python：Excel
xlrd与xlwt:xls文件 如果不想看前半部分的基础知识,可以直接看最后的总结部分 1.两个模块 读xlrd 写xlwt import xlrd,xlwt 2.读 2.1 文件.表格信息的获取 打 ...
- C# Event (1) —— 我想搞个事件
本文地址:https://www.cnblogs.com/oberon-zjt0806/p/15975299.html 本文最初来自于博客园 本文遵循CC BY-NC-SA 4.0协议,转载请注明出处 ...
- 安装MYSQL8.0提示api-ms-win-crt-runtime-l1-1-0.dll 丢失
Windows Server 2012 api-ms-win-crt-runtime-l1-1-0.dll 丢失 2017-11-06 11:11:37 Martin_Yelvin 阅读数 17015 ...
- Semantic Text Similarity
stop word是指像the,is ,are等等方向的词 stemming意思就是将形式化为一样的形式,比如lists,listed,list都可以化为list形式.
- 云原生入门 第五章：kubernetes学习实践
1. 简介 在本章中,我们将学习不同的Kubernetes对象,它们的用途以及如何与它们交互. 在设置集群或使用现有集群之后,我们可以开始部署一些工作负载.Kubernetes中最小的计算单元不是一个 ...
- Web网站建站过程（白嫖）——域名
目录 1.域名注册商(选一个吧) 2.域名注册 没有域名建啥站? 1.域名注册商(选一个吧) 到时候你们就会想起: ...... 但是我们不用上面的,因为上面的太费Q,我们要用的是-- 2.域名注册 ...
- 编程篇——Java学习路线
1.java基础编程2.Java多线程编程(并发)3.Java设计模式(重构)4.Java调试技术(Java虚拟机)5.Java常用框架学习篇6.Java开发之web篇
- DDD 领域驱动设计之面向对象思想
面向对象 面向对象是一种对世界理解和抽象的方法.那么对象是什么呢? 对象是对世界的理解和抽象,世界又代称为万物.理解世界是比较复杂的,但是世界又是由事物组成的. 正是这样的一种关系,认识事物是极其重要 ...
- OpenCv基础_三
轮廓检测 图像金字塔 上采样,图像变大一倍,矩阵用0填充 img = cv2.imread('1,jpg') cv_show('img',img) up = cv2.pyrUp(img) cv_sho ...