CSS —— BFC机制

参考：https://www.cnblogs.com/qs-cnblogs/p/12349887.html
参考：https://blog.csdn.net/sinat_36422236/article/details/88763187

BFC 定义

BFC直译为“块级格式化上下级”。它是一个独立的渲染区域，只有Block-level box 参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

个人理解

1、BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响；
2、可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题；
3、可以将BFC想象成一个工具，无需探究其定义，只要着重理解其功能（特性）即可。

在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。

Box：css布局的基本单位

Box 是 CSS 布局的对象和基本单位。直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

block-level box： display属性为block，list-item, table 的元素，会生成block-level box。并且参与block fomatting conntext；
inline-level box: display属性为inline，inline-block，inline-table的元素，会生成inline-level box。并且参与inline formatting context。
run-in box: css3中才有，这儿先不讲了。

Formatting Context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC是一个独立的布局环境，其中的元素是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

BFC的特性

1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
2、计算BFC高度时浮动元素也参于计算（重点）
3、BFC的区域不会与浮动容器发生重叠（重点）
4、BFC内的容器在垂直方向依次排列
5、元素的margin-left与其包含块的border-left相接触
6、BFC是独立容器，容器内部元素不会影响容器外部元素

注：其中1、2、3需重点理解，其特性和功能下面将用代码逐个演示；
4、5、6为基本现象，按字面意思理解即可，不做重点说明。

如何创建BFC

1、根元素（）
2、float的值不是none。
3、position的值不是static或者relative。值为absolute、fixed
4、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
5、overflow的值不是visible

BFC的作用

1.利用BFC避免外边距margin重叠。
一起来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>防止margin重叠</title>
</head>
<style>*{margin: 0;padding: 0;}p {color: #f55;background: yellow;width: 200px;line-height: 100px;text-align:center;margin: 30px;}
</style>
<body><p>看看我的 margin是多少</p><p>看看我的 margin是多少</p>
</body>
</html>

页面生成的效果就是这样的：
根据第二条，属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>防止margin重叠</title>
</head>
<style>*{margin: 0;padding: 0;}p {color: #f55;background: yellow;width: 200px;line-height: 100px;text-align:center;margin: 30px;}div{overflow: hidden;}
</style>
<body><p>看看我的 margin是多少</p><div><p>看看我的 margin是多少</p></div>
</body>
</html>

2.自适应两栏布局
根据：

每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<style>*{margin: 0;padding: 0;}body {width: 100%;position: relative;}.left {width: 100px;height: 150px;float: left;background: rgb(139, 214, 78);text-align: center;line-height: 150px;font-size: 20px;}.right {height: 300px;background: rgb(170, 54, 236);text-align: center;line-height: 300px;font-size: 40px;}
</style>
<body><div class="left">LEFT</div><div class="right">RIGHT</div>
</body>
</html>

页面：
又因为：

BFC的区域不会与float box重叠。

所以我们让right单独成为一个BFC

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<style>*{margin: 0;padding: 0;}body {width: 100%;position: relative;}.left {width: 100px;height: 150px;float: left;background: rgb(139, 214, 78);text-align: center;line-height: 150px;font-size: 20px;}.right {overflow: hidden;height: 300px;background: rgb(170, 54, 236);text-align: center;line-height: 300px;font-size: 40px;}
</style>
<body><div class="left">LEFT</div><div class="right">RIGHT</div>
</body>
</html>

页面：

right会自动的适应宽度，这时候就形成了一个两栏自适应的布局。

3.清除浮动的影响
当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清除浮动。

比如这样：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>清除浮动</title>
</head>
<style>.par {border: 5px solid rgb(91, 243, 30);width: 300px;}.child {border: 5px solid rgb(233, 250, 84);width:100px;height: 100px;float: left;}
</style>
<body><div class="par"><div class="child"></div><div class="child"></div></div>
</body>
</html>

页面：
这个时候我们根据最后一条：

计算BFC的高度时，浮动元素也参与计算。

给父节点激活BFC

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>清除浮动</title>
</head>
<style>.par {border: 5px solid rgb(91, 243, 30);width: 300px;overflow: hidden;}.child {border: 5px solid rgb(233, 250, 84);width:100px;height: 100px;float: left;}
</style>
<body><div class="par"><div class="child"></div><div class="child"></div></div>
</body>
</html>

页面：

总结

以上例子都体现了：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

CSS —— BFC机制相关推荐

CSS中的BFC机制
1 什么是BFC 块格式化上下文BFC(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域 ...
什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）
BFC机制 BFC(Block Formatting Context):块格式化上下文 BFC是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其余元素的关系和相互 ...
BFC机制与浮动定位脱离文档流
BFC机制与浮动定位脱离文档流 BFC块格式化上下文 --w3c规定的一种独立渲染区域渲染流程基本上四个步骤: 1.计算CSS样式 2.构建Render Tree 3.Layout – 定位.大小, ...
前端笔记（6）css布局机制，浮动，清除浮动，图片格式，ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制浮动浮动(float)的扩展清除浮动额外标签法(隔墙法) 父级添加overflow属性方法使用after伪元素清除浮动使用双伪元素清除浮 ...
localStorage的黑科技-js和css缓存机制
一.发现黑科技的起因今天在微信公众号看到一篇技术博文,想用印象笔记收藏,所以发送了文章链接到pc上.然后习惯性地打开控制台,看看源码,想了解下最近微信用了什么新技术. 呵呵,以下勾起了我侦探的欲 ...
CSS BFC学习笔记
BFC,全称是Block Formatting Context,块级格式化上下文. 具体是什么,可以理解为页面元素的一种特性,触发了BFC的元素往往会产生一些对初学者而言意想不到的效果. 触发BFC的 ...
css优先级机制说明
首先说明下样式的优先级,样式有三种: 1. 外部样式(External style sheet) 示例: <link h ...
前端知识-CSS定位机制:标准流、浮动、定位
标准流从上到下依次排列浮动脱离标准流,不占位置,但影响标准流,但是文字会环绕而非到浮动元素下面. 在最近父元素内浮动,不超过父元素的padding只在content内浮动浮动是的元素显示模式变 ...
【前端圭臬】五：CSS 核心机制——布局
前言最近几周我一直在看 CSS 规范,下来感受就是,真·心乱如麻.也就是 CSS 是真的简单,真的,你说你 JS 巨佬,我膜拜,HTML 大师,我 respect,CSS 专家,呃,你是写规范的吗, ...