关于BFC理解

时间 2019-11-17

标签关于 bfc 理解繁體版

原文原文链接

BFC(Block Formatting Context，块格式上下文)是Web页面的可视化CSS渲染的一部分，是布局过程当中生成块级盒子的区域，也是浮动元素与其余元素的交互限定区域。对其的理解可以帮你更好的布局页面。原文连接请戳这里javascript

常见的定位方案

在进入BFC话题前，先来捋一下常见的定位方案，定位方案是控制元素的布局，主要有三种常见的方案：css

普通流(正常文档流)

在普通流中，元素按照其在HTML的前后位置至上而下布局，在这个过程当中，行内元素水平排列，直到当行被占满而后换行，块级元素则被渲染为完整的一个新行，除非另外指定，不然全部元素默认都是流定位。也能够说，普通流中元素的位置由该元素在HTML文档中的位置决定。html

额外：⚠️java

HTML中，元素能够分红块级元素（block-level elements）和行内元素（inline-level elements）。具体的解析会另开一篇博文出来说解。git

下面给出普通流的一个例子：github

<body>
	<span>first</span>
	<a href="javascript:;">second</a>
	<div class="demo demo1"></div>
	<div class="demo demo2"></div>
</body>
复制代码

html,body{
	margin: 0;
	padding: 0;
}
.demo{
	width: 200px;
	height: 200px;
}
.demo1{
	background: red;
}
.demo2{
	background: blue;
}
复制代码

浮动

在浮动布局中，元素首先按照普通流的位置出现，而后根据浮动的方向尽量的向左边或右边偏移，其效果和印刷排版中的文本环绕类似。以下：网络

<body>
	<div class="container">
		<div class="left"></div>
		文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
	</div>
</body>
复制代码

html,body{
    margin: 0;
    padding: 0;
}
body{
    padding: 100px;
}
.container{
    border: 1px dotted red;
}
.container .left{
    width: 50px;
    height: 50px;
    background: blue;
    float: left;
}
复制代码

⚠️为什会内容环绕呢，而不是跟浮动元素重合呢？frontend

《CSS权威指南》中指出，浮动的目的，最初只能用于图像，的就是为了容许其余内容（如文本）“围绕”该图像。然后来的CSS容许浮动任何元素。ide

绝对定位

在绝对定位布局中，元素会总体脱离普通流（浮动布局能够理解成脱离父元素文本流），所以绝对定位不会对其兄弟元素形成影响，而具体的位置由绝对定位的坐标决定。布局

什么是BFC

Formatting context（格式上下文）是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。

BFC即Block Formatting Content（块级格式上下文），它属于上述定位方案的普通流。具备BFC特性的元素能够看做是**隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，而且BFC具备普通容器所没有的一些特性。**后面介绍。

简单来讲，能够把BFC理解成一个封闭的大箱子，箱子内部的元素不管如何翻江倒海，都不会影响到外部的元素。

触发BFC的条件

下面的方式会建立块格式上下文：

根元素或包含根元素的元素，这里我理解为body元素
浮动元素（元素的float不是none）
绝对定位元素（元素的position为absolute或fixed）
行内块元素（元素的display为inline-block）
表格单元格（元素的display为table-cell，html表格单元格默认为该值）
表格标题（元素的display为table-caption，html表格标题默认为该值）
匿名表格单元格元素（元素的display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是html table、row、tbody、thead、tfoot的默认属性）或inline-table）
overflow值不为visible的块元素
display值为flow-root的元素
contain值为layout、content或strict的元素
弹性元素（display为flex或inline-flex元素的直接子元素）
网格元素（display为grid或inline-grip元素的直接子元素）
多列容器（元素的column-count或column-width不为auto，包括column-count为1）
column-span为all的元素始终会建立一个新的BFC，即便该元素没有包裹在一个多列容器中

建立了块格式上下文的元素中的全部内容都会被包含在BFC中。以上的建立方式参考自块格式化上下文

BFC的特性（做用）

简单罗列下BFC的特性：

内部的box会在垂直方向，从顶部开始一个接一个地放置
box垂直方向的距离由margin决定。属于同一个BFC的两个相邻的box的margin会发生叠加，结果值并集
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）。（对于从右到左的格式来讲，则触碰到右边缘），即便是浮动也是如此。即不会发生margin穿透。
造成了BFC的区域不会与float box重叠（可阻止因浮动元素引起的文字环绕现象）
计算BFC高度时，浮动元素也参与计算（BFC会确切包含浮动的子元素，即闭合浮动）

注意⚠️，对于第五点，本来浮动元素是应该脱离文档流的，可是BFC中会计算其高度。

BFC的一些应用

实现自适应的两栏布局

应用了第四点BFC的区域不会与float box重叠的特性。一边浮动，另外一边自适应的部分造成BFC，那么二者就不会重叠，避免了文字环绕及相似情形。

<body>
	<div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
	</div>
</body>
复制代码

html,body{
    margin: 0;
    padding: 0;
}
body{
    padding: 50px;
}
.container {
    width: 100%;
}
.left {
    width: 100px;
    height: 150px;
    background-color: blue;
    float: left;
}
.right {
    height: 200px;
    background-color: red;
    overflow: hidden; /*把.right这个自适应的box变成BFC，避免与.left box这个有float属性的元素重叠*/
}
复制代码

解决父元素高度塌陷

高度塌陷产生的缘由：父元素未设置固定的高度，彻底由子元素高度撑开；当子元素float以后脱离了文档流，父元素内部就没有支撑，形成了高度的塌陷。

解决这种问题我上以前的博文中有总结，地址请戳CSS清除浮动。这里再简单的说下原理：

也就是用到了BFC的特性五：闭合内部浮动。

<body>
	<div class="container">
	    <div class="left">left</div>
	</div>
</body>
复制代码

html,body{
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    border: 1px solid red;
    overflow: hidden; /*造成BFC，使其能闭合浮动 box*/
}
.left {
    width: 100px;
    height: 150px;
    background-color: blue;
    float: left;
}
复制代码

margin重叠解决

在正常的文档流中，在垂直方向上兄弟box的margin会取交集（取最大的显示），为神马会出现这种状况呢？能够说是一种bug，也能够说是一种规范。我比较倾向于后者。

<body>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
</body>
复制代码

.top {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-bottom: 100px;
}
.bottom{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 50px;
}
复制代码

上面出现的状况是BFC的特性三：属于同一个BFC的两个相邻的box的margin会发生叠加，结果值并集。那么，咱们将他们隔离成不一样的BFC不久解决问题了嘛。

<body>
    <div class='wrap'>
        <div class="top">top</div>
    </div>
    <div class="bottom">bottom</div>
</body>
复制代码

.top {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-bottom: 100px;
}
.bottom{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 50px;
}
.wrap{
    overflow: hidden; /*将.top box包含在另一个BFC中隔离开*/
}
复制代码

后话

使用好BFC可以是你更好的布局。文中部份内容参考网络内容。

各位大佬轻喷，还请多多指正。放上github地址github.com/reng99求指教就逃:)

1. 关于BFC的简单理解
2. 关于BFC
3. 对于BFC的理解
4. 关于BFC跟NFC
5. 理解BFC以及BFC相关布局问题解决
6. BFC理解
7. 理解BFC
8. 理解 BFC
9. BFC的理解
10. 理解BFC、IFC
更多相关文章...
• Spring声明式事务管理（基于Annotation注解方式实现） - Spring教程
• Spring声明式事务管理（基于XML方式实现） - Spring教程
• NewSQL-TiDB相关
• Docker 清理命令