什么是BFC？BFC的规则是什么？如何创建BFC？ #15
Comments
|
概念(BFC) "块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 规则(BFC) 内部的Box会在垂直方向，一个接一个地放置 产生(BFC) float的值不为none。 自适应两栏布局 |
|
BFC:块级格式化上线文，Block fromatting context 的缩写，BFC是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域的外部毫无关系。 |
一、什么是BFC？BFC全称为block formatting context，中文为“块级格式化上下文”。相对应的还有IFC， 也就是inline formatting context，中文为“内联格式化上下”。 二、BFC的原理是什么？上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。 三、如何创建BFC？• 根元素; 元素就加个类似.clearfix 的类名，否则只能暴露你孱 弱的 CSS 基本功。
BFC 的结界特性最重要的用途其实不是去 margin 重叠或者是清除 float 影响，而是实 现更健壮、更智能的自适应布局。 |
|
了解BFC
如何创建BFC
BFC的应用 |
|
对于这个名词真是熟悉得不能在熟悉了，可是自己理解得还是有写浅薄 写在前面Box: CSS布局的基本单位
Formatting context：块级上下文格式化
CSS2.1 中只有 简单总结 BFC是什么它是一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离 BFC触发条件
BFC的规则
应用
其实这些应用我们在实际工作都用到了，只不理解WHY
根据BFC的规则Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 在其中一个div外面包裹一层，并且设置一个BFC。他们之前都是同一根元素下面，现在让其中一个div脱离出来
|
BFCBFC块级格式化上下文, 一旦形成一个块级格式化上下文，这个上下文中的元素的布局不会影响外部元素的布局 如何触发块级格式化上下文（常见）
BFC 的应用场景1. 经典的两栏布局 <div class="div1"></div>
<div class="div2"></div>.div1 {
float: left;
width: 300px;
background-color: pink;
height: calc(100vh - 100px); // 为了展示效果
}
.div2 {
background-color: black;
height: 100vh;
overflow: hidden;
}解释: 如果不触发div2的BFC, 那么div2会当做浮动元素不存在, 就会出现div1浮动在div2上，在布局中这并不是想要的。在div2上添加overflow:hidden触发BFC, 它就不会和另一个BFC重叠而是各自展示各自的，互不影响 2. 浮动闭合 3.外边距合并问题 |
|
1.什么是BFC？ 2.BFC的原理是什么？ 3.如何创建BFC？ |
|
BFC，Block Format Context，块格式化上下文，是页面上一个样式独立不干扰外界也不受外界干扰的盒子。 下列方式会创建块格式化上下文：
推荐阅读: |
什么是BFC？BFC的原理是什么？如何创建BFC？盒模型
基础盒模型(CSS basic box model)当浏览器对一个 render tree 进行渲染时，浏览器的渲染引擎就会根据 基础盒模型(CSS basic box model) ，将所有元素划分为一个个矩形的盒子，这些盒子的外观，属性由 我们在浏览器控制台输入如下代码就可以看到页面的每一个元素都是由一个矩形来包裹的，这些就是盒子。 $$('*').forEach(e => {
e.style.border = '1px solid';
})图示如下： 视觉格式化模型(visual formatting model)
每个盒子的布局由以下因素决定：
视觉格式化模型(visual formatting model) 的计算，都取决于一个矩形的边界，这个矩形，被称作是 包含块( containing block ) 。 一般来说，(元素)生成的框会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。 例子如下： <div>
<table>
<tr>
<td>hi</td>
</tr>
</table>
</div>以上代码为例， 图示：(图片来自w3help)： 盒子的生成
以下是盒子相关的概念定义：
BFC(Block formatting contexts)
定义浮动、绝对定位元素、块容器（例如inline-blocks、table-cells、and table-captions）以及溢出而非可视的元素（除非该值已经传播到了视口）都是建立 BFC(Block formatting contexts) 的条件。 表现在BFC(Block formatting contexts)中，在包含块内一个盒子一个盒子不重叠地垂直排列，两个兄弟盒子直接的垂直距离由 鱼头注：简单来说，BFC就是一个独立不干扰外界也不受外界干扰的盒子啊(/ω＼)。 块级相关的计算正常流中的块级与非替换元素
上面的计算法则是基于 ** 如果宽度不是 auto 或者 'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width' 的结果大于包含块的宽度，对于以下规则，被视为零。 如果只有一个值指定为'auto'，则其使用的值来自相等。 如果宽度设置为 auto ，则任何其他 auto 值变为 0 ，并且宽度会跟着所以盒子的情况铺满。 如果 'margin-left' 跟 **'margin-right'**都为 auto ，则会使元素相对于包含块的边缘水平居中。 浮动与非替换元素如果 'margin-left' 跟 **'margin-right'**都为 auto ，则它们的具体值为 0 。 如果宽度为 auto，则使用 shrink-to-fit 的宽度计算方式（CSS 2.2没有定义精确的算法）。 然后 shrink-to-fit 大概的计算方式则是：min(max(preferred minimum width, available width), preferred width)。 绝对定位与非替换元素
如果 'left'，'width' 和 'right' 都是 'auto'，则首先将 'margin-left' 和 'margin-right' 的 'auto' 值设置为 0。 如果 'left'，'width' 和 'right' 都不是 'auto'，则按照实际值来算。 如果 'margin-left' 跟 'margin-right' 都为 0 ，则根据 'left' ，'width' 和 'right' 的值是否是 'auto' 来计算。 如果 一个方向值 ，'width' 的值是 'auto'，而 '另一个一个方向值' 不是，则宽度使用 shrink-to-fit 算法计算。如果一个值为**'auto'**而另外两个值不算，则该值使用 shrink-to-fit 来计算。 上面的计算法则是基于 鱼头注：这里特别说明一点，在MDN中依然把flexbox跟gridbox 算在 BFC中，但在最新的规范里，它们已经从BFC中分离了出去，成为独立的一个CSS模块，内容如下： |
1，什么是BFC？2，BFC的原理是什么？3，如何创建BFC?4,BFC作用？ |
|
### 什么是BFC？ ### BFC的原理是什么？
### 如何创建BFC？ |
|
1. 什么是BFC? |
|
1.什么是BFC？ |
什么是BFC：块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 触发条件：
规则：
应用：
|
|
BFC= Block fomatting context = block-level box + Formatting Context 形成BFC的条件： |
|
(1)什么是BFC:块格式化上下文（Block Formatting Context）是一个独立的渲染区域，简单来说就是一个独立的盒子，并且这个盒子里的布局不受外部影响，也不会影响到外部元素。 |
什么是BFCw3c对BFC的定义是 浮动元素和绝对定位元素，非块级盒子的块级容器，以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC 先决条件1、float的值不是none。 创建BFC只要满足上面的条件就可以例子就不写了 实际应该利用BFC避免外边距折叠 |
|
Formatting Contexts分类 页面上所有的一切都是格式化上下文的一部分，或者说属于一块区域，什么样的区域呢？在这块区域，元素如何展示是被定义好的。 创建一个新的block formatting context 这非常有用，因为一个新建的BFC可以和外部的FC工作，新建的BFC相当于一个迷你的小生态，嵌套在外层的布局中。 会新建一个BFC的情况
上面这个例子中，第一个DIV下是一个BFC，但是子的DIV使用了浮动，使这个元素脱离了原来的文档流。 但是我们这里用overflow纯粹是为了创建一个BFC，所以并不好，阅读上会不好。
BFC布局规则
链接：https://www.jianshu.com/p/66632298e355 让一个元素脱离文档流 |
|
BFC：块级格式上下文，Block Formatting Contexts https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context |
3.1 什么是 BFC？BFC 即 Block formatting context，译为块级格式化上下文。简单来说，它是一种属性，这种属性影响着元素的定位以及与其兄弟元素之间的相互作用。因为是属性，所以我们通常说“元素具有 BFC”、“元素触发了 BFC”，而不说“元素是 BFC”。 从样式上看，具有 BFC 的元素与普通的容器没有什么区别；但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的子元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性。 3.2 如何触发 BFC？CSS 规定满足下列 CSS 声明之一的元素便会生成 BFC：
3.3 BFC 的特性从整体上看，BFC 是隔离了的容器，这个具体可以表现为三个特性： 3.3.1 BFC 会阻止 margin 塌陷前面我们说过 BFC 可以用于解决 margin 塌陷问题。
3.3.2 BFC 可以包含浮动的元素前面说过，父元素没有设置高度时，子元素的浮动会导致父元素表现为 0 高度，也就是说正常情况下父元素无法包含浮动的子元素。如图： .Fa{
border: 2px solid red;
width: 300px;
}
.son{
width:180px;
height:180px;
background-color:yellow;
float:left;
}但是触发了父元素的 BFC 后，父元素将可以包含浮动的子元素。如图： .Fa{
border: 2px solid red;
width: 300px;
overflow:hidden; /* 随便一个 BFC 的触发条件 */
}
.son{
width:180px;
height:180px;
background-color:yellow;
float:left;
}3.3.3 BFC 可以阻止元素被浮动元素覆盖前面说过浮动元素会影响兄弟元素的位置，具体地说就是浮动之后脱离了文档流，使得兄弟元素上移填补空缺，而这会使得它被浮动元素覆盖。如图： 但是触发了兄弟元素的 BFC 后，兄元素将不会被浮动的元素覆盖 ———— 不会被覆盖，意味着兄弟元素出现在浮动元素的旁边或者下面，具体取决于父元素的宽度。 如果父元素的宽度不足以包含这两个子元素的宽度之和，则子兄弟元素会出现在子浮动元素的下面。如图： |
什么是BFC？BFC即“块级格式化上下文"，它能够形成一个隔离的独立容器，而且子容器布局不受外部容器影响。 如何创建BFC1.float值不为none BFC作用1、形成一个独立的容器，子容器布局不受外部容器影响。 |
|
BFC是块级格式化上下文，不与其他块重合，浮动，定位，overflow能够形成块级格式化上下。 |
BFC块级格式化上下文，其中W3C 对其的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。 从另一个角度来理解的话，BFC 是一个独立的布局环境，其中的元素布局是不受外界影响的。且其中的块盒和行盒（内联元素组成），都会沿着父元素的边框垂直排列 BFC满足以下条件的一个或者多个
BFC的创建只要满足上述的几个条件即可创建成功 BFC的好处
|
what（什么是BFC）参考MDN，BFC（块格式化上下文）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程中发生的区域，而且存在浮动元素与其他元素交互的区域。 术语普及块盒子：block box，如果一个块级盒子同时也是一个块容器盒子（见下），则称其为块盒子。除具名块盒子之外，还有一类块盒子是匿名的，称为匿名块盒子（Anonymous block box），匿名盒子无法被CSS选择符选中。 why（为什么要用BFC）因为在写css的过程中，我们会遇到这样的情况：
how（怎么做）继续往下说，怎么解决上面的问题
当然，这只是上面三个问题的解决方案。
|
|
BFC的全称叫做块级格式化上下文，拥有BFC属性的元素是一个独立的空间，内部的布局不会影响外部，外部的布局也不会影响内部。BFC元素在计算高度的时候浮动元素也会参与计算，在页面中是一个独立的容器，BFC区域不会与浮动元素重合。BFC可以用来解决margin塌陷和清除浮动。
|
什么是BFC？如何创建BFC？什么是BFC？BFC ，Block formatting context，即是块级格式化上下文。可以把它理解成是一个独立的容器，并且这个容器的里的布局，与容器外的布局毫不相干。 如何创建BFC？
|
|
1.什么是BFC? （微信名：RUN） |
什么是BFC？BFC（Block Formatting Context）直译为块格式化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其它元素的关系和相互作用。 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。 BFC的原理是什么？原理不清。 如何创建BFC？只要元素满足下面任一条件即可触发 BFC 特性：
主要应用： |
BFC的定义 BFC全称block formatting context，中文为”格式块级化上下文“。一个元素开启了BFC，其里面的子元素不会影响到外面的元素，所以BFC元素不会发生margin重叠。 如何创建BFC
|
|
BFC 是 Block Formatting Context 的缩写，即块格式化上下文。我们来看一下CSS2.1规范中对 BFC 的说明。
因此，如果想要深入的理解BFC，我们需要了解以下两个概念：
BoxBox 是 CSS 布局的对象和基本单位，页面是由若干个Box组成的。 元素的类型 和 Formatting ContextFormatting Context 是页面的一块渲染区域，并且有一套渲染规则，决定了其子元素将如何定位，以及和其它元素的关系和相互作用。 Formatting Context 有 BFC (Block formatting context)，IFC (Inline formatting context)，FFC (Flex formatting context) 和 GFC (Grid formatting context)。 BFC布局规则
如何创建BFC
BFC的应用1.防止 margin 重叠 <style>
.a{
height: 100px;
width: 100px;
margin: 50px;
background: pink;
}
</style>
<body>
<div class="a"></div>
<div class="a"></div>
</body>两个div直接的
<style>
.a{
height: 100px;
width: 100px;
margin: 50px;
background: pink;
}
.container{
overflow: auto;; /*触发生成BFC*/
}
</style>
<body>
<div class="container">
<div class="a"></div>
</div>
<div class="a"></div>
</body>2.清除内部浮动(CSS中经常遇到的问题之一) <style>
.a{
height: 100px;
width: 100px;
margin: 10px;
background: pink;
float: left;
}
.container{
width: 120px;
border: 2px solid black;
}
</style>
<body>
<div class="container">
<div class="a"></div>
</div>
</body>
<style>
.a{
height: 100px;
width: 100px;
margin: 10px;
background: pink;
float: left;
}
.container{
width: 120px;
display: inline-block;
border: 2px solid black; /*触发生成BFC*/
}
</style>3.自适应两栏布局 <style>
body{
width: 500px;
}
.a{
height: 150px;
width: 100px;
background: pink;
float: left;
}
.b{
height: 200px;
background: blue;
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
<style>
.b{
height: 200px;
overflow: hidden; /*触发生成BFC*/
background: blue;
}
</style> |
|
BFC的概念 BFC即块级格式上下文 block formatting context,通俗理解 在布局中 拥有BFC属性 或触发BFC的元素 就是文档中一个独立的块 器内部元素无法对外部元素造成影响 外部元素也无法影响内部元素 触发BFC的方式
BFC的好处
|
|
BFC：块级格式化上下文。BFC内的元素布局不会影响到外部 触发 BFC
BFC的好处
|
|
BFC(Block formatting context)块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，规定了内部的如何布局，与这个区域外部毫不相干， 1.内部的box会在垂直方向，一个接一个地放置。 那些元素会生成BFC呢？ BFC的应用场景 1.自适应布局栏（两栏适应和三栏适应） 总结; |
|
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述布局模式的流动模型。是W3C CSS2.1规范中的一个概念，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的的一些特性。通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。 只要元素满足下面任一条件即可触发BFC特性： |
什么是BFCBFC：（Block Formatting Context）块格式化上下文，是web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 BFC原理？
如何创建BFC？
BFC的应用
|
BFC定义文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。 FC是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用 通俗一点的方式解释: BFC 可以简单的理解为某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。 常见的FC有BFC、IFC（行级格式化上下文），还有GFC（网格布局格式化上下文）和FFC（自适应格式化上下文） BFC的原理
触发BFC
一点总结：display:table-cell; 是一个比较好用的属性（ie8+），跟inline-block具有相同的效果。但是我们知道，当元素inline-block后，相邻元素之间会有空隙(准确的说法详见3.3)，而table-cell不会。 另外table-cell的宽度永远不会超过父元素的宽度。 应用场景自适应两栏布局
清除内部浮动
防止垂直margin重叠垂直的两个块级元素中子元素有边距，会叠加到外层使得两个块级元素间有空隙
|
|
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 哪些元素会生成BFC
BFC应用： 总结: 因为BFC内部的元素，绝对不会与外部元素相互影响，因此当BFC外部存在浮动时，它不会影响BFC内部Box的布局，BFC会通过变窄，而不与浮动元素有重叠；同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会把内部浮动元素的高度也计算在内， 避免margin重叠也是这样一个道理. |
|
BFC：block formatting context(块级格式化上下文) |
Box
Formatting Context
BFC
BFC触发条件
BFC的规则
BFC的应用
|
要明白 盒模型MDN对其描述如下： 当对一个文档进行布局(lay out)的时候，浏览器的渲染引擎会根据标准之一的 每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
我们在浏览器的控制台也可以很清楚的看到页面的每一个元素（除了单独的文本元素），其实都是一个盒子：
更加详细的介绍可以参考MDN或者W3C规范的描述： http://www.ayqy.net/doc/css2-1/box.html(翻译版) 视觉格式化模型MDN 对其描述如下： CSS视觉格式化模型（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是CSS的基础概念之一。 视觉格式化模型会根据
关于不同类型盒子的介绍，大家可以直接看MDN，写的很详细了，这里就不再阐述。这边着重讲下定位方案。 定位方案一旦生成了盒子，CSS引擎就需要定位它们以完成布局。在定位的时候，浏览器会根据元素的盒类型和上下文对这些元素进行定位，可以说盒就是定位的基本单位。定位时有三种定位方案，分别是：常规流(即普通流)、浮动流以及绝对定位。 常规流（Normal flow）
浮动（Floats）
绝对定位（Absolute positioning）
FC(Formatting context)Formatting context是W3C CSS2.1规范中的一个概念。它是页面中一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的Formatting context有Block formatting context(简称BFC)和Inline formatting context(简称IFC)。 CSS2.1中只有BFC和IFC，CSS3中还增加了 好了，接下来轮到我们的主角 BFC是什么
讲了这么多概念，说下自己的理解，如果有不对的地方，烦请指出，感激不尽。
是不是可以这样理解： BFC布局规则
如何创建BFC
其实还有很多，这里列出的是一些比较常用的，跟详细的可以看MDN。 通过几个实例来加深理解1.自适应两栏布局实现自适应两栏布局的方法有很多，但是我觉得 页面截图：
根据
即使存在浮动元素 根据
所以，我们可以给 给 再来看下效果：
2.清除内部浮动页面截图：
可以看到，由于子元素设置了浮动，而父元素又没有设置高度，导致父元素高度塌陷了：没有自动被子元素的高度撑开。 根据
我们可以给父元素 再看下效果：
3.阻止margin重叠页面截图：
根据
可以看到，第一个div的下边距跟第二个的上边距发生了重叠。 重叠的结果按照如下规则计算：
产生重叠的必备条件：margin必须是邻接的! 我们只要给其中一个div外层再包裹一层div，然后触发其生成一个新的 页面截图：
还有很多其他的例子，比如可以避免文字环绕、多列布局等等，这里就不再一一列举，大家有兴趣的可以自己多尝试下，这里有一个网址可以在线演示，更加直观， 创建BFC的新方式我们上面举的例子都是通过
所以实际项目开发中，还需要根据项目的需求来选择合适的方法，最好也能在代码里写明注释。 那有没有什么更好的方式呢？CSS工作组定义了一个新的属性值： 你可以使用 caniuse上
目前来看，兼容性还是差了一点。
BFC概念理解可以想象一下， 最后感谢您的阅读，希望对你有所帮助，希望你能通过这篇文章能对 参考： |
|
什么是BFC？BFC的规则是什么？如何创建BFC？ |
什么是BFCBFC 是一块独立的渲染区域，只有它内部的 BFC产生以下任意一种情况都能在其内部产生BFC：
BFC布局规则
BFC应用场景
参考资料 |
|
BFC 全称为块格式化上下文 (Block Formatting Context) 。 根元素或其它包含它的元素 |
and others
No description provided.
The text was updated successfully, but these errors were encountered: