理解CSS-BFC概念

时间 2019-11-08

标签理解 css bfc 概念栏目 CSS 繁體版

原文原文链接

前言

BFC 已是一个耳听熟闻的词语了，可是我对于BFC的概念以及应用场景一直都不是很明白，听说搞懂BFC可让咱们理解CSS中某些本来诡异的地方。今天着重去了解了一下，作了如下总结。
css

1、文档流

在解释BFC以前，先说一下文档流。咱们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。
html

FC（Formatting Context），直译过来就是“格式化上下文”，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其余元素之间的关系和做用。常见的FC有BFC（块级格式化上下文）、IFC（行级格式化上下文）、GFC（网格布局格式化上下文）、FFC（自适应格式化上下文）。本文着重介绍BFC，其他的就不在这里深刻展开了
jquery

2、文档流的定位方案

【1】常规流(Normal flow)git

在常规流中，盒一个接着一个排列;
在块级格式化上下文里面，它们竖着排列；
在行内格式化上下文里面，它们横着排列;
当position为static或relative，而且float为none时会触发常规流；
对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置；
对于相对定位(relative positioning)，position: relative，盒偏移位置由top、bottom、left、right属性定义。即便有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

【2】浮动(Floats)github

左浮动元素尽可能靠左、靠上，右浮动同理
这致使常规流环绕在它的周边，除非设置 clear 属性
浮动元素不会影响块级元素的布局
但浮动元素会影响行内元素的布局，让其围绕在本身周围，撑大父级元素，从而间接影响块级元素布局
最高点不会超过当前行的最高点、它前面的浮动元素的最高点
不超过它的包含块，除非元素自己已经比包含块更宽
行内元素出如今左浮动元素的右边和右浮动元素的左边，左浮动元素的左边和右浮动元素的右边是不会摆放浮动元素的

【3】绝对定位(Absolute positioning)浏览器

绝对定位方案，盒从常规流中被移除，不影响常规流的布局；
它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；
若是元素的属性position为absolute或fixed，它是绝对定位元素；
对于position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，若是没有则相对于body；

2、BFC是什么？

MDN上的解释：块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程当中生成块级盒子的区域，也是浮动元素与其余元素的交互限定区域。
app

BFC（Block Formatting Context）直译为“块级格式化上下文”，是用于布局块级盒子的一块渲染区域。它规定了内部的块级如何布局，而且与这个区域外部绝不相干。简单的归纳为：所谓的BFC就是CSS布局的一个概念，是一块区域，一个环境。
ide

3、BFC触发方式

上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它有多大，这些由生成BFC的元素决定，CSS2.1中规定知足下列CSS声明之一的元素便会生成BFC。
wordpress

【1】根元素，即HTML元素布局

【2】浮动元素：float值为left、right

【3】overflow值不为 visible，为 auto、scroll、hidden

【4】display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid

【5】position的值为absolute或fixed 　　

4、浏览器对BFC的约束规则

【1】内部的Box会在垂直方向上一个接一个的放置

【2】垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）

【3】每一个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素能够超出他的包含块边界）

【4】BFC的区域不会与float的元素区域重叠

【5】计算BFC的高度时，浮动子元素也参与计算

【6】BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

5、 BFC在布局中的应用

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。咱们能够利用BFC的这个特性来作不少事。

【1】防止margin重叠（塌陷）

根据BFC布局规则第【2】条：垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）两个p元素之间的距离应该为(50+50)px,发生了margin重叠后，两个p之间的距离为50px

解决：咱们能够在其中一个p外面包裹一层容器，并触发该容器生成一个新BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

<style> p { color: rgba(21, 22, 22, 0.972); background: rgb(231, 105, 2); width: 200px; line-height: 100px; text-align:center; margin: 50px; font-weight: bold; } </style> <body> <p>Hello</p> <p>Hi</p> </body>复制代码

<style> .wrap { /* 新的BFC */ overflow: hidden; } </style>复制代码

【2】清除内部浮动

根据BFC布局规则第【5】条：计算BFC的高度时，浮动子元素也参与计算。parent内部元素浮动了，所以div的高度就坍塌了，要解决坍塌，就得清除浮动。

解决：为达到清除内部浮动，咱们能够触发parent生成BFC，那么parent在计算高度时，parent内部的浮动元素child也会参与计算。

<style> .parent { border: 5px solid rgb(231, 105, 2); width: 300px; } .child { border: 5px solid rgba(95, 179, 235, 0.972); width: 100px; height: 100px; float: left; } </style> <body> <div class="parent"> <div class="child"></div> <div class="child"></div> </div> </body>复制代码

<style> .parent { border: 5px solid rgb(231, 105, 2); width: 300px; /* 新的BFC */ overflow: hidden; } </style>复制代码

【3】自适应多栏布局

根据BFC布局规则第【3】条：每一个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便浮动元素也是如此。　所以，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

解决：咱们能够经过经过给main设置overflow：hidden来触发main生成BFC，当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。所以会根据包含块的宽度，和aside的宽度，自动变窄。从而实现自适应两栏布局。

<style> body { width: 400px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: rgb(48, 44, 44); } .main { height: 200px; background: rgb(194, 189, 189); } </style> <body> <div class="aside"></div> <div class="main"></div> </body>复制代码

<style> .main { /* 新的BFC */ overflow: hidden; height: 200px; background: rgb(194, 189, 189); } </style>复制代码

【4】用于布局

圣杯布局和双飞翼布局，他们的都要求三列布局，中间宽度自适应，两边定宽，这样作的优点是重要的东西放在文档流前面能够优先渲染。详情连接：圣杯布局&&双飞翼布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> </head> <style> body { min-width: 550px; font-weight: bold; font-size: 20px; } #header, #footer { background: rgba(29, 27, 27, 0.726); text-align: center; height: 60px; line-height: 60px; } #footer { clear: both; } #container { padding-left: 200px; padding-right: 150px; overflow: hidden; } #container .column { position: relative; float: left; text-align: center; height: 300px; line-height: 300px; } #center { width: 100%; background: rgb(206, 201, 201); } #left { width: 200px; right: 200px; margin-left: -100%; background: rgba(95, 179, 235, 0.972); } #right { width: 150px; margin-right: -150px; background: rgb(231, 105, 2); } </style> <body> <div id="header">#header</div> <div id="container"> <div id="center" class="column">#center</div> <div id="left" class="column">#left</div> <div id="right" class="column">#right</div> </div> <div id="footer">#footer</div> </body> </html>复制代码

参考：

CSS深刻理解流体特性和BFC特性下多栏自适应布局

史上最全面、最透彻的BFC原理剖析

深刻理解BFC

Understanding Block Formatting Contexts in CSS

BFC 神奇背后的原理

 BFC 初体验