什么是BFC（块级格式上下文）？
㈠什么是BFC？
BFC 全称为 块格式化上下文 (Block Formatting Context) 。
定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
㈡BFC的布局规则是什么？
1）内部的box会在垂直方向，一个接一个地放置（可以看作BFC中有一个的常规流）。
2）Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3）每个元素的margin box 的左边，会包含块border box的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此
4）BFC的区域不会与float box 重叠
5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
6）计算BFC的高度时，浮动元素也参与计算
㈢那些情况会产生新的BFC/如何创建BFC？
⑴根元素或其它包含它的元素
⑵浮动 (元素的 float 不为 none)
⑶绝对定位元素 (元素的 position 为 absolute 或 fixed)
⑷行内块 inline-blocks (元素的 display: inline-block)
⑸表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
⑹表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
⑺overflow 的值不为 visible的元素
⑻弹性盒 flex boxes (元素的 display: flex 或 inline-flex)
㈣边距重叠在什么时候或者什么情况下会发生呢？
⑴父与子之间：子级的上下margin会与父级上下margin重叠，以最大值为标准去渲染
⑵空元素：如果设置了margin-top和margin-bottom，它会在这两之间取一个最大值作为它的最终边距值
⑶兄弟元素之间：每个兄弟之间都有上边距或者每个兄弟之间都有下边距，原则就是取最大的值
㈤BFC与高度坍塌
⑴什么是高度坍塌？
父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。
⑵为什么坍塌？
float 脱离了普通流，并且创建了新的BFC，而父元素不具备产生 BFC 的条件，所以它的高度为0。
⑶如何用BFC解决高度坍塌？
通过了解BFC的特性我们知道，BFC会把它包含的浮动元素高度也算在里面，也就是闭合浮动。
拿 overflow: auto 举例：
overflow: auto 并不会闭合浮动，而是 overflow: auto 会创建一个新的BFC，避免浮动的元素侵入其他元素。
注：在支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
㈥BFC的常见作用是什么？
1.阻止外边距折叠
问题案例：margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<head>
<style>
div{
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
效果图：
从效果上看，因为两个div元素都处于同一个BFC容器下（这里指body元素），所以第一个div的下边距和第二个div的上边距发生了重叠，所以两个盒子之间距离只有100px，而不是200px。
如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<head>
<style>
.container {
overflow: hidden;
}
p {
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
</style>
</head>
<body>
<div class="container">
<p></p>
</div>
<div class="container">
<p></p>
</div> </body>
</html>
效果图：
2.包含浮动元素
问题案列：高度塌陷问题，在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合，这时就可以用BFC来清除浮动了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <body> <div style="border: 1px solid blue;"> <div style="width: 100px;height: 100px;background: red;float: left;"> </div> </div> </body>
</html>
效果图：
由于容器内元素浮动，脱离了文档流，所以容器只剩下2px的边距高度。如果触发容器的BFC，那么容器将会包裹浮动元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <body> <div style="border: 1px solid blue;overflow: hidden"> <div style="width: 100px;height: 100px;background: red;float: left;"> </div> </div> </body>
</html>
效果图：
3、阻止元素被浮动元素覆盖
问题案例：div浮动兄弟这该问题：由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给右侧元素添加 overflow: hidden，触发BFC来解决遮挡问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <body> <div style="height: 100px;width: 100px;float: left;background: lightblue">
我是一个左浮动的元素
</div> <div style="width: 200px; height: 200px;background: pink">
我是一个没有设置浮动, 也没有触发 BFC 元素, 现在看看会发生什么效果吧，要仔细看。
</div> </body>
</html>
效果图：
这时候其实第二个元素有部分被浮动元素所覆盖，但是文本信息不会被浮动元素所覆盖，如果想避免元素被覆盖，可触发第二个元素的BFC特性，在第二个元素中加入overflow：hidden，就会变成：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<body> <div style="height: 100px;width: 100px;float: left;background: lightblue">
我是一个左浮动的元素
</div> <div style="width: 200px; height: 200px;background: pink;overflow:hidden">
我是一个没有设置浮动, 也没有触发 BFC 元素, 现在看看会发生什么效果吧，要仔细看。
</div> </body>
</html>
效果图：
什么是BFC（块级格式上下文）？的更多相关文章
- BFC块级格式上下文
BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...
- BFC块级格式上下文介绍
块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分.它是用于决定块盒 ...
- BFC——块级格式上下文
BFC中的B指的是block,对应的还有IFC,I指的是inline.对于BFC的理解可以参考层叠上下文.页面中,盒子的排布规则,是生效在对应的BFC中.两个BFC中的布局互不影响.页面的本身的根本身 ...
- BFC块级格式
BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...
- 理解 CSS 布局和块级格式上下文
前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding C ...
- CSS2系列：BFC(块级格式化上下文)IFC(行级格式化上下文)
BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...
- BFC块级格式化上下文
BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...
- BFC——块级格式化上下文
BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...
- CSS--理解块级格式上下文（BFC）
1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box(块级元素)参与, ...
随机推荐
- BUUOJ reverse SimpleRev （爆破）
SimpleRev SimpleRev(flag需加上flag{}再提交) 注意:得到的 flag 请包上 flag{} 提交 拖到ida 找到关键函数: unsigned __int64 Decry ...
- [转帖]Intro Guide to Dockerfile Best Practices
Intro Guide to Dockerfile Best Practices By Tibor Vass July 02 2019 https://blog.docker.com/2019/ ...
- 如何在java中去除中文文本的停用词
1. 整体思路 第一步:先将中文文本进行分词,这里使用的HanLP-汉语言处理包进行中文文本分词. 第二步:使用停用词表,去除分好的词中的停用词. 2. 中文文本分词环境配置 使用的HanLP-汉 ...
- Servlet请求和响应
在Java Web中Servlet.请求和响应是最基本的三个对象,在Web容器的管理下,这三者能够完成基本的HTTP请求处理. Servlet的作用是为客户提供服务.servlet的角色是接受一个客户 ...
- 【B2B】01-BFS
纠正我对 01-BFS 问题的错误认识. 我一直以为对于 01-BFS,每次点 $u$ 出队时,对于 $u$ 的邻接边表中的边,只要先松弛边权为 0 的边再松弛边权为 1 的边就能保证每个点只入队一次 ...
- （模拟）关于进制的瞎搞---You Are Given a Decimal String...（Educational Codeforces Round 70 (Rated for Div. 2)）
题目链接:https://codeforc.es/contest/1202/problem/B 题意: 给你一串数,问你插入最少多少数可以使x-y型机器(每次+x或+y的机器,机器每次只取最低位--% ...
- 如何在LinuxKernel中操作file(set_fs與get_fs)
在Kernel 中,照理說能存取至 0 ~ 4GB.但是實作層面卻是只能讓我們使用到3GB ~ 4GB 這會導致我們無法使用open(),write()這些在user space下的function. ...
- 你写的 Java 代码是如何一步步输出结果的？ （转）
出处: 一步步解析java执行内幕 对于任何一门语言,要想达到精通的水平,研究它的执行原理(或者叫底层机制)不失为一种良好的方式.在本篇文章中,将重点研究java源代码的执行原理,即从程 序员编写J ...
- C# 面向对象4 构造函数
构造函数 1.构造函数用来创建对象,并且可以在构造函数中对对象进行初始化. (给对象的每个属性依次的赋值) 2.构造函数是用来创建对象的特殊方法: 1.方法名和类名一样. 2.没有返回值,连void都 ...
- AGC009E Eternal Average
atc 神题orz 那个擦掉\(k\)个数然后写上一个平均值可以看成是\(k\)叉Huffman树的构造过程,每次选\(k\)个点合成一个新点,然后权值设为平均值.这些0和1都会在叶子的位置,同时每个 ...