上学块格式化上下文

学习BFC

2015/08/21 · CSS ·
BFC

原稿出处:
elcarim的博客   

BFC全称是Block Formatting
Context,即块格式化上下文。它是CSS2.1规范定义的,关于CSS渲染定位的八个概念。要明白BFC到底是怎么,首先来探视怎样是视觉格式化模型。

什么是BFC

BFC全称是Block Formatting
Context,即块格式化上下文。它是CSS2.1标准定义的,关于CSS渲染定位的三个概念。要精晓BFC到底是什么样,首先来探视怎么着是视觉格式化模型。
视觉格式化模型
视觉格式化模型(visual formatting
model)是用来拍卖文书档案并将它显得在视觉媒体上的建制,它也是CSS中的二个定义。

视觉格式化模型定义了盒(Box)的扭转,盒首要不外乎了块盒、行内盒、匿名盒(没有名字不可能被挑选器选中的盒)以及一些实验性的盒(以后恐怕抬高到标准中)。盒的品类由display
品质决定。

块盒(block box)
块盒有以下特点:

  • 当成分的CSS属性displayblocklist-itemtable时,它是块级成分block-level;
  • 视觉上展现为块,竖直排列;
  • 块级盒参加(块格式化上下文);
  • 每种块级成分至少生成八个块级盒,称为首要块级盒(principal block-level
    box)。一些因素,比如<li>,生成额外的盒来放置项目的志,然则超过1/4要素只生成一个关键块级盒。

行内盒(inline box)

  • 当元素的CSS属性display的总结值为inlineinline-block
    inline-table时,称它为行内级元素;
  • 视觉上它将内容与此外行内级成分排列为多行;典型的如段落内容,有文件(能够有各类格式譬如注重),或图片,都是行内级成分;
  • 行内级成分生成行内级盒(inline-level
    boxes),参加行内格式化上下文(inline formatting
    context)。同时参加生成行内格式化上下文的行内级盒称为行内盒(inline
    boxes)。全部display:inline
    的非替换来分生成的盒是行内盒;
  • 不参与生成行内格式化上下文的行内级盒称为原子行内级盒(atomic
    inline-level
    boxes)。那个盒由可替换行内成分,或display值为inline-blockinline-table
    的成分生成,不能够拆分成八个盒;

匿名盒(anonymous box)
匿名盒也有份匿名块盒与匿名行内盒,因为匿名盒没著名字,无法使用选取器来抉择它们,所以它们的持有属性都为inherit或开头暗许值;
如下边例子,会创键匿名块盒来含有毗邻的行内级盒:

    <p>followed by a paragraph</p>
     followed by more inline text.
   </div>```

**三个定位方案**
在定位的时候,浏览器就会根据元素的盒类型和上下文对这些元素进行定位,可以说盒就是定位的基本单位。定位时,有三种定位方案,分别是常规流,浮动已经绝对定位。
常规流(Normal flow)

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

浮动(Floats)
* 盒称为浮动盒(floating boxes);
* 它位于当前行的开头或末尾;
* 这**导致常规流环绕在它的周边**,除非设置 clear 属性;

绝对定位(Absolute positioning)
* 绝对定位方案,**盒从常规流中被移除**,不影响常规流的布局;
* 它的定位相对于它的包含块,相关CSS属性:top
,bottom
,left
及right
;
* 如果元素的属性 `position`为`absolute`或`fixed`,它是绝对定位元素;
* 对于`position: absolute`
,元素定位将相对于最近的一个`relative`、`fixed`或`absolute`的父元素,如果没有则相对于`body`
;

块格式化上下文
到这里,已经对CSS的定位有一定的了解了,从上面的信息中也可以得知,块格式上下文是页面CSS 视觉渲染的一部分,**用于决定块盒子的布局及浮动相互影响范围的一个区域**。
BFC的创建方法
* **根元素**或其它包含它的元素;
* **浮动** (元素的`float`不为`none`);
* **绝对定位元素** (元素的`position`为`absolute`或`fixed`);
* **行内块**`inline-blocks`(元素的`display: inline-block`);
* **表格单元格**(元素的`display: table-cell,HTML`表格单元格默认属性);
* `overflow`的值不为visible的元素;
* **弹性盒 flex boxes** (元素的`display: flex`或`inline-flex`);

但其中,最常见的就是`overflow:hidden`、`float:left/right`、`position:absolute`
。也就是说,每次看到这些属性的时候,就代表了该元素以及创建了一个BFC了。
BFC的范围
BFC的范围在MDN中是这样描述的。
```A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.```

中文的意思一个BFC包含创建该上下文元素的所有子元素,但不包括创建了新BFC的子元素的内部元素。
这段看上去有点奇怪,我是这么理解的,加入有下面代码,class名为.BFC
代表创建了新的块格式化:

<div id=’div_1′ class=’BFC’>
<div id=’div_2′>
<div id=’div_3′></div>
<div id=’div_4′></div>
</div>
<div id=’div_5′ class=’BFC’>
<div id=’div_6′></div>
<div id=’div_7′></div>
</div>
</div>“`

那段代码表示,#div_1
创办了多少个块格式上下文,那几个上下文包蕴了#div_2
、#div_3
、#div_4
、#div_5
。即#div_2
中的子成分也属于#div_1
所开创的BFC。但由于#div_5
创造了新的BFC,所以#div_6
和#div_7
就被解除在外围的BFC之外。
本身觉着,那从另一方角度验证,贰个因素不能够而且存在于四个BFC中
BFC的八个最要害的效用是,让远在BFC内部的成分与外部的因素相互隔开分离,使内外因素的定势不会互相影响。那是选拔BFC清除浮动所使用的风味,关于解除浮动将在后面讲述。
借使一个要素能够同时处于八个BFC中,那么就表示那一个成分能与四个BFC中的成分暴发效能,就违背了BFC的隔绝功用,所以那么些只要就不树立了。
BFC的效果
仿佛刚刚提到的,BFC的最醒指标效益正是起家1个隔开分离的空中,断绝空间内外因素间互动的法力。但是,BFC还有更加多的特征:
Floats, absolutely positioned elements, block containers (such as
inline-blocks, table-cells, and table-captions) that are not block
boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when
that value has been propagated to the viewport) establish new block
formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block. The vertical
distance between two sibling boxes is determined by the ‘margin’
properties. Vertical margins between adjacent block-level boxes in a
block formatting context collapse.

In a block formatting context, each box’s left outer edge touches the
left edge of the containing block (for right-to-left formatting, right
edges touch). This is true even in the presence of floats (although a
box’s line boxes may shrink due to the floats), unless the box
establishes a new block formatting context (in which case the box itself
may become narrower due to the floats).

简言之归咎一下:
内部的盒会在笔直方向2个接二个排列(能够看做BFC中有1个的常规流);
远在同三个BFC中的成分互相影响,只怕会发出margin collapse;
各种成分的margin box的左侧,与容器块border
box的右边相接触(对于从左往右的格式化,不然反而)。尽管存在浮动也是如此;
BFC正是页面上的三个隔开分离的独门容器,容器里面包车型地铁子成分不会影响到外面包车型客车因素,反之亦然;
测算BFC的冲天时,考虑BFC所包蕴的兼具因素,连浮动成分也插手总结;
扭转盒区域不叠加到BFC上;

那般多属性有点难以领悟,但能够作如下推理来襄助掌握:html的根成分正是<html>
,而根成分会创立一个BFC,创制二个新的BFC时就一定于在那个因素内部创建二个新的<html>
,子成分的永恒就好像同在2个新<html>
页面中那么,而以此新旧html页面之间时不会相互影响的。
上述这么些精通并不是最纯正的驾驭,甚至是将因果倒置了(因为html是根成分,因而才会有BFC的性状,而不是BFC有html的性状),但如此的演绎能够援救领会BFC那一个概念。
从实际上代码来分析BFC
讲了这么多,依然比较难掌握,所以下边通过有个别例证来深化对BFC的认识。
实例一
<style> * { margin: 0; padding: 0; } .left{ background: #73DE80;
/* 绿色 / opacity: 0.5; border: 3px solid #F31264; width: 200px;
height: 200px; float: left; } .right{ /
粉色 */ background: #EF5BE2;
opacity: 0.5; border: 3px solid #F31264; width:400px; min-height:
100px; } .box{ background:#888; height: 100%; margin-left: 50px;
}</style><div class=’box’> <div class=’left’>
</div> <div class=’right’> </div></div>

来得效果:

绿色框(’#left’)向左浮动,它成立了1个新BFC,但暂且不研商它所创办的BFC。由于茶青框浮动了,它退出了原先normal
flow的职分,由此,浅灰褐框(’#right’)就被定位到中湖蓝父成分的左上角(天性3:成分左侧与容器左侧相接触),与转变青黑框发生了重叠。
并且,由于莲灰框(’#box’)并不曾创制BFC,因而在测算高度的时候,并从未考虑土色框的区域(脾气6:浮动区域不叠加到BFC区域上),发生了冲天坍塌,那也是大面积难点之一。
实例二
现行反革命透过安装overflow:hidden
来创造BFC,再看看效果怎么着。
.BFC{ overflow: hidden;}<div class=’box BFC’> <div
class=’left’> </div> <div class=’right’>
</div></div>

深橙框创立了1个新的BFC后,中度发生了转移,总括中度时它将暗灰框区域也考虑进来了(性子5:计算BFC的冲天时,浮动成分也涉足计算);
而鲜绿框和影青框的来得效果如故没有此外变化。
实例三
后日,现将一部分小块添加到黄铜色框中,看看效果:
<style> .little{ background: #fff; width: 50px; height: 50px;
margin: 10px; float: left; }</style><div class=’box BFC’>
<div class=’left’> </div> <div class=’right’> <div
class=’little’></div> <div class=’little’></div>
<div class=’little’></div> </div></div>

出于大青框没有开立异的BFC,因而铁灰框中浅灰块受到了海水绿框的震慑,被挤到了左侧去了。先不管这么些,看看藤黄块的margin。
实例四
选择同实例二中一律的法门,为宝石红框创制BFC:
<div class=’box BFC’> <div class=’left’> </div>
<div class=’right BFC’> <div class=’little’></div>
<div class=’little’></div> <div
class=’little’></div> </div></div>

若果紫蓝框创造了新的BFC今后,玉石白框就不与血红浮动框发生重叠了,同时内部的镉红块处于隔开分离的长空(天性4:BFC正是页面上的二个隔开分离的独门容器),深湖蓝块也不会遭遇暗黄浮动框的挤压。
总结
以上正是BFC的辨析,BFC的概念比较空虚,但透超过实际例分析应该能够更好地通晓BFC。在实质上中,利用BFC能够闭合浮动(实例二),幸免与转移成分重叠(实例四)。同时,由于BFC的割裂作用,能够动用BFC包涵3个要素,幸免那几个成分与BFC外的要素发生margin
collapse。
参考
视觉格式化模型 | MDN
块格式化上下文| MDN
CSS之BFC详解
W3C block-formatting

BFC全称是Block Formatting
Context,即块格式化上下文。它是CSS2.1正式定义的,关于CSS渲染定位的三个定义。要掌握BFC到底是如何,首先来看看哪些是视觉格式化模型。

什么是BFC

BFC全称是Block Formatting
Context,即块格式化上下文。它是CSS2.1正经定义的,关于CSS渲染定位的多少个概念。要明白BFC到底是什么样,首先来探视如何是视觉格式化模型。

视觉格式化模型

视觉格式化模型(visual formatting
model)是用来处理文档并将它显得在视觉媒体上的编写制定,它也是CSS中的2个概念。

视觉格式化模型定义了盒(Box)的变化,盒主要回顾了块盒、行内盒、匿名盒(没盛名字不能被增选器选中的盒)以及部分试验性的盒(今后大概抬高到标准中)。盒的花色由display属性决定。

视觉格式化模型

视觉格式化模型

视觉格式化模型(visual formatting
model)是用来拍卖文书档案并将它展现在视觉媒体上的建制,它也是CSS中的七个定义。

视觉格式化模型定义了盒(Box)的变更,盒首要不外乎了块盒、行内盒、匿名盒(没出名字不能够被挑选器选中的盒)以及一些实验性的盒(以后或者助长到标准中)。盒的档次由display属性决定。

块盒(block box)

块盒有以下特征:

  • 当成分的CSS属性displayblocklist-item或 table时,它是块级成分block-level;
  • 视觉上海展览中心现为块,竖直排列;
  • 块级盒参预(块格式化上下文);
  • 各样块级成分至少生成二个块级盒,称为首要块级盒(principal block-level
    box)。一些成分,比如<li>,生成额外的盒来放置项目的志,可是抢先二分之一因素只生成3个器重块级盒。

视觉格式化模型(visual formatting
model)是用来拍卖文书档案并将它呈现在视觉媒体上的机制,它也是CSS中的三个概念。

块盒(block box)

块盒有以下特征:

当成分的CSS属性display为block,list-item或 table时,它是块级成分block-level;
视觉上海展览中心现为块,竖直排列;
块级盒参与(块格式化上下文);
各类块级成分至少生成四个块级盒,称为重要块级盒(principal block-level
box)。一些因素,比如<li>,生成额外的盒来放置项目的志,可是大部分成分只生成三个要害块级盒。

行内盒(inline box)

  • 当成分的CSS属性display的总括值为inlineinline-blockinline-table时,称它为行内级元素;
  • 视觉上它将内容与别的行内级成分排列为多行;典型的如段落内容,有文件(能够有三种格式譬如器重),或图片,都以行内级成分;
  • 行内级成分生成行内级盒(inline-level
    boxes),加入行内格式化上下文(inline formatting
    context)。同时加入生成行内格式化上下文的行内级盒称为行内盒(inline
    boxes)。全数display:inline的非替换来分生成的盒是行内盒;
  • 不参预生成行内格式化上下文的行内级盒称为原子行内级盒(atomic
    inline-level
    boxes)。这个盒由可替换行内成分,或 display 值为 inline-block 或inline-table 的因素生成,不能拆分成七个盒;

视觉格式化模型定义了盒(Box)的变更,盒首要不外乎了块盒、行内盒、匿名盒(没著名字不能够被挑选器选中的盒)以及一些实验性的盒(以后可能添加到正规中)。盒的项目由display属性决定。

行内盒(inline box)

当成分的CSS属性display的总计值为inline,inline-block或inline-table时,称它为行内级成分;
视觉上它将内容与其余行内级成分排列为多行;典型的如段落内容,有文件(能够有二种格式譬如注重),或图表,都以行内级成分;
行内级成分生成行内级盒(inline-level boxes),插足行内格式化上下文(inline
formatting
context)。同时出席生成行内格式化上下文的行内级盒称为行内盒(inline
boxes)。全体display:inline的非替换来分生成的盒是行内盒;
不参预生成行内格式化上下文的行内级盒称为原子行内级盒(atomic inline-level
boxes)。这么些盒由可替换行内成分,或 display 值为 inline-block 或
inline-table 的成分生成,不可能拆分成多个盒;

匿名盒(anonymous box)

匿名盒也有份匿名块盒与匿名行内盒,因为匿名盒没知名字,无法使用选取器来抉择它们,所以它们的具有属性都为inherit或开端默许值;

如上边例子,会创键匿名块盒来含有毗邻的行内级盒:

XHTML

<div> Some inline text <p>followed by a paragraph</p>
followed by more inline text. </div>

1
2
3
4
5
<div>
    Some inline text
    <p>followed by a paragraph</p>
    followed by more inline text.
</div>

金沙澳门官网 1

块盒(block box)

匿名盒(anonymous box)

匿名盒也有份匿名块盒与匿名行内盒,因为匿名盒没有名字,不能够选拔采纳器来挑选它们,所以它们的保有属性都为inherit或开头暗中认可值;

如下边例子,会创键匿名块盒来含有毗邻的行内级盒:

<div>
    Some inline text
    <p>followed by a paragraph</p>
    followed by more inline text.
</div>

金沙澳门官网 2

image.png

五个定点方案

在从来的时候,浏览器就会遵照元素的盒类型和上下文对那个元素举行定位,能够说盒就是定点的主题单位。定位时,有三种永恒方案,分别是常规流,浮动已经相对定位。

块盒有以下特点:

多个稳定方案

在固定的时候,浏览器就会基于成分的盒类型和上下文对这一个因素实行固定,能够说盒正是稳定的中坚单位。定位时,有三种固定方案,分别是常规流,浮动已经相对定位。

常规流(Normal flow)

  • 在常规流中,盒二个随即叁个排列;
  • 块级格式化上下文里面, 它们竖着排列;
  • 行内格式化上下文里面, 它们上学块格式化上下文。横着排列;
  • positionstaticrelative,并且floatnone时会触发常规流;
  • 对于静态定位(static
    positioning),position: static盒的职位是常规流布局里的职位
  • 对于相对稳定(relative
    positioning),position: relative,盒偏移地点由这几个属性定义topbottomleftandright即便有偏移,依然保留原来的职责,其它常规流不能够占据那么些地方。

当成分的CSS属性display为block,list-item或table时,它是块级元素block-level;

常规流(Normal flow)

  1. 在常规流中,盒三个随之八个排列;
  2. 在块级格式化上下文里面, 它们竖着排列;
  3. 在行内格式化上下文里面, 它们横着排列;
  4. 当position为static或relative,并且float为none时会触发常规流;
  5. 对于静态定位(static positioning),position:
    static,盒的任务是常规流布局里的任务;
  6. 对此相对固定(relative positioning),position:
    relative,盒偏移地点由这一个属性定义top,bottom,leftandright。固然有偏移,依旧保留原来的岗位,其余常规流不能占据那么些职责。

浮动(Floats)

  • 盒称为浮动盒(floating boxes);
  • 它身处当前行的发端或最终;
  • 致使常规流环绕在它的广阔,除非设置 clear 属性;

视觉上表现为块,竖直排列;

浮动(Floats)

  1. 盒称为浮动盒(floating boxes);
  2. 它座落当前行的发端或最终;
  3. 这导致常规流环绕在它的广阔,除非设置 clear 属性;

纯属定位(Absolute positioning)

  • 纯属定位方案,盒从常规流中被移除,不影响常规流的布局;
  • 它的一向相对于它的涵盖块,相关CSS属性:topbottomleftright
  • 倘若成分的天性positionabsolutefixed,它是纯属定位成分;
  • 对于position: absolute,成分定位将相对于近来的二个relativefixedabsolute的父元素,假设没有则相对于body

块级盒插手(块格式化上下文);

纯属定位(Absolute positioning)

  1. 纯属定位方案,盒从常规流中被移除,不影响常规流的布局;
  2. 它的稳定相对于它的隐含块,相关CSS属性:top,bottom,left及right;
  3. 假诺成分的天性position为absolute或fixed,它是相对定位成分;
  4. 对于position:
    absolute,成分定位将相对于近期的五个relative、fixed或absolute的父成分,即使没有则相对于body;

块格式化上下文

到此处,已经对CSS的定位有一定的问询了,从地点的消息中也能够摸清,块格式上下文是页面CSS
视觉渲染的一有些,用来决定块盒子的布局及变化互相影响范围的2个区域

每一个块级成分至少生成三个块级盒,称为主要块级盒(principal block-level
box)。一些因素,比如

块格式化上下文

到那里,已经对CSS的原则性有必然的打听了,从地方的新闻中也足以识破,块格式上下文是页面CSS
视觉渲染的一有的,用于决定块盒子的布局及变化互相影响范围的3个区域。

BFC的开创方法

  • 根元素或别的富含它的因素;
  • 浮动 (元素的float不为none);
  • 纯属定位成分 (元素的positionabsolutefixed);
  • 行内块inline-blocks(元素的 display: inline-block);
  • 报表单元格(元素的display: table-cell,HTML表格单元格暗许属性);
  • overflow的值不为visible的元素;
  • 弹性盒 flex boxes (元素的display: flexinline-flex);

但中间,最广大的就是overflow:hiddenfloat:left/rightposition:absolute。也正是说,每回看到那么些属性的时候,就象征了该因素以及开创了3个BFC了。

,生成额外的盒来放置项目的志,不过当先四分之二要素只生成3个第二块级盒。

BFC的创办方法

  • 根成分或任何富含它的因素;
  • 浮动 (元素的float不为none);
  • 相对定位成分 (成分的position为absolute或fixed);
  • 行内块inline-blocks(元素的 display: inline-block);
  • 报表单元格(成分的display: table-cell,HTML表格单元格默许属性);
  • overflow的值不为visible的要素;
  • 弹性盒 flex boxes (元素的display: flex或inline-flex);

但内部,最广大的正是overflow:hidden、float:left/right、position:absolute。也正是说,每便观察这个属性的时候,就意味着了该因素以及开创了2个BFC了。

BFC的范围

BFC的限制在MDN中是那般描述的。

A block formatting context contains everything inside of the element
creating it that is not also inside a descendant element that creates
a new block formatting context.

华语的趣味一个BFC包括创造该上下文成分的全体子成分,但不包罗创建了新BFC的子成分的在这之中因素。

那段看上去有些出人意料,作者是如此精晓的,参预有上边代码,class名为.BFC代表创造了新的块格式化:

XHTML

<div id=’div_1′ class=’BFC’> <div id=’div_2′> <div
id=’div_3′></div> <div id=’div_4′></div>
</div> <div id=’div_5′ class=’BFC’> <div
id=’div_6′></div> <div id=’div_7′></div>
</div> </div>

1
2
3
4
5
6
7
8
9
10
<div id=’div_1′ class=’BFC’>
<div id=’div_2′>
<div id=’div_3′></div>
<div id=’div_4′></div>
</div>
<div id=’div_5′ class=’BFC’>
<div id=’div_6′></div>
<div id=’div_7′></div>
</div>
</div>

那段代码表示,#div_1开创了3个块格式上下文,那几个上下文包含了#div_2#div_3#div_4#div_5。即#div_2中的子成分也属于#div_1所开创的BFC。但鉴于#div_5开创了新的BFC,所以#div_6#div_7就被解除在外围的BFC之外。

本人觉得,那从另一方角度表达,多少个要素不能够同时设有于两个BFC中

BFC的二个最要害的效能是,让地处BFC内部的因素与外表的要素互相隔断,使内外因素的定位不会互相影响。那是应用BFC清除浮动所选择的天性,关于解除浮动将在前边讲述。

借使二个因素可以同时处于三个BFC中,那么就表示那个因素能与四个BFC中的元素产生成效,就违反了BFC的割裂成效,所以这一个只要就不树立了。

行内盒(inline box)

BFC的范围

BFC的限定在MDN中是如此讲述的。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

华语的情趣三个BFC包蕴创制该上下文元素的全部子成分,但不包涵创制了新BFC的子成分的内部因素。

那段看上去某个出人意料,作者是那样清楚的,插手有上边代码,class名为.BFC代表创造了新的块格式化:

<div id='div_1' class='BFC'>
    <div id='div_2'>
        <div id='div_3'></div>
        <div id='div_4'></div>
    </div>
    <div id='div_5' class='BFC'>
        <div id='div_6'></div>
        <div id='div_7'></div>
    </div>
</div>

那段代码表示,#div_1创办了三个块格式上下文,这几个上下文包涵了#div_2、#div_3、#div_4、#div_5。即#div_第22中学的子元素也属于#div_1所创办的BFC。但鉴于#div_5开立了新的BFC,所以#div_6和#div_7就被拔除在外围的BFC之外。

本身觉得,那从另一方角度表达,贰个因素无法同时设有于四个BFC中。

BFC的二个最重点的效益是,让处在BFC内部的因素与表面包车型地铁因素相互隔绝,使内外因素的定位不会彼此影响。那是选择BFC清除浮动所采用的风味,关于解除浮动将在后边讲述。

设若三个成分能够同时处于四个BFC中,那么就代表那些元素能与七个BFC中的成分产生成效,就违背了BFC的隔离成效,所以那个只要就不树立了。

BFC的效果

就像刚刚提到的,BFC的最引人注目标法力就是确立2个切断的空中,断绝空间内外因素间互相的效率。然则,BFC还有越多的特征:

Floats, absolutely positioned elements, block containers (such as
inline-blocks, table-cells, and table-captions) that are not block
boxes, and block boxes with ‘overflow’ other than ‘visible’ (except
when that value has been propagated to the viewport) establish new
block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block. The vertical
distance between two sibling boxes is determined by the ‘margin’
properties. Vertical margins between adjacent block-level boxes in a
block formatting context collapse.

In a block formatting context, each box’s left outer edge touches the
left edge of the containing block (for right-to-left formatting, right
edges touch). This is true even in the presence of floats (although a
box’s line boxes may shrink due to the floats), unless the box
establishes a new block formatting context (in which case the box
itself may become narrower due to the floats).

简言之回顾一下:

  1. 内部的盒会在笔直方向2个接三个排列(能够视作BFC中有一个的常规流);
  2. 处在同2个BFC中的成分相互影响,可能会发出margin collapse;
  3. 每一个成分的margin box的左边,与容器块border
    box的左侧相接触(对于从左往右的格式化,不然反而)。尽管存在浮动也是那般;
  4. BFC正是页面上的二个隔绝的单身容器,容器里面的子成分不会潜移默化到外面包车型地铁因素,反之亦然;
  5. 估测计算BFC的中度时,考虑BFC所富含的持有因素,连浮动成分也涉香港足球总会结;
  6. 扭转盒区域不叠加到BFC上;

这么多属性有点难以通晓,但能够作如下推理来赞助通晓:html的根成分就是<html>,而根元素会创建3个BFC,创造一个新的BFC时就相当于在那些成分内部成立一个新的<html>,子元素的定位就不啻在多个新<html>页面中那么,而以此新旧html页面之间时不会相互影响的。

上述那几个精晓并不是最精确的明亮,甚至是将因果倒置了(因为html是根成分,因而才会有BFC的性子,而不是BFC有html的特色),但这么的演绎能够扶持领悟BFC这几个定义。

当成分的CSS属性display的计算值为inline,inline-block或inline-table时,称它为行内级成分;

BFC的效果

就像刚刚提到的,BFC的最分明的法力便是创设3个切断的半空中,断绝空间内外因素间相互的功用。然则,BFC还有愈多的特点:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

粗略归结一下:

  1. 在这之中的盒会在笔直方向3个接一个排列(能够视作BFC中有三个的常规流);

  2. 处于同叁个BFC中的成分相互影响,恐怕会发生margin collapse;

  3. 各类成分的margin box的左侧,与容器块border
    box的左侧相接触(对于从左往右的格式化,不然反而)。即便存在浮动也是这么;

  4. BFC正是页面上的二个隔绝的单独容器,容器里面包车型地铁子元素不会影响到外面包车型大巴要素,反之亦然;

  5. 测算BFC的冲天时,考虑BFC所涵盖的兼具因素,连浮动成分也涉香港足球总会计;

  6. 扭转盒区域不叠加到BFC上;

这么多属性有点难以精晓,但能够作如下推理来增派精通:html的根成分就是<html>,而根成分会创制一个BFC,创造多个新的BFC时就一定于在那一个因素内部创立2个新的<html>,子成分的永恒就就如在1个新<html>页面中那样,而以此新旧html页面之间时不会互相影响的。

上述那几个领会并不是最纯粹的了解,甚至是将因果倒置了(因为html是根成分,由此才会有BFC的特征,而不是BFC有html的特点),但那样的推理能够扶持明白BFC那几个概念。

从实质上代码来分析BFC
讲了那般多,还是相比难知晓,所以上边通过有个别事例来强化对BFC的认识。

实例一

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .left{
        background: #73DE80;    /* 绿色 */
        opacity: 0.5;
        border: 3px solid #F31264;
        width: 200px;
        height: 200px;
        float: left;
    }
    .right{                     /* 粉色 */
        background: #EF5BE2;
        opacity: 0.5;
        border: 3px solid #F31264;
        width:400px;
        min-height: 100px;
    }
    .box{
        background:#888;
        height: 100%;
        margin-left: 50px;
    }
</style>
<div class='box'>
    <div class='left'> </div>
    <div class='right'> </div>
</div>

突显效果:

金沙澳门官网 3

绿色框(’#left’)向左浮动,它创制了一个新BFC,但一时半刻不研究它所开创的BFC。由于暗绿框浮动了,它退出了原来normal
flow的地点,由此,深草绿框(’#right’)就被一定到海蓝父元素的左上角(性格3:成分左侧与容器左侧相接触),与变化栗褐框发生了重叠。

同时,由于浅豆绿框(’#box’)并没有开创BFC,因而在盘算高度的时候,并不曾考虑煤黑框的区域(特性6:浮动区域不叠加到BFC区域上),产生了中度坍塌,这也是广阔难题之一。

实例二

最近通过设置overflow:hidden来创制BFC,再看看效果怎么着。

.BFC{
    overflow: hidden;
}

<div class='box BFC'>
    <div class='left'> </div>
    <div class='right'> </div>
</div>

金沙澳门官网 4

image.png

灰白框创设了三个新的BFC后,高度产生了转变,总结中度时它将石磨蓝框区域也考虑进来了(天性5:计算BFC的中度时,浮动成分也加入计算);

而油红框和灰黄框的显得效果依旧没有别的变化。

实例三

当今,现将部分小块添加到深灰框中,看看效果:

<style>
    .little{
        background: #fff;
        width: 50px;
        height: 50px;
        margin: 10px;
        float: left;
    }
</style>

<div class='box BFC'>
    <div class='left'> </div>
    <div class='right'>
        <div class='little'></div>
        <div class='little'></div>
        <div class='little'></div>
    </div>
</div>

金沙澳门官网 5

image.png

由于碧绿框没有创立新的BFC,因而铜绿框中浅深桔黄块受到了黄褐框的震慑,被挤到了右手去了。先不管那些,看看紫灰块的margin。

实例四

动用同实例二中相同的措施,为深灰框创制BFC:

<div class='box BFC'>
    <div class='left'> </div>
    <div class='right BFC'>
        <div class='little'></div>
        <div class='little'></div>
        <div class='little'></div>
    </div>
</div>

金沙澳门官网 6

image.png

假定深红框成立了新的BFC今后,铜绿框就不与银白浮动框爆发重叠了,同时中间的海军蓝块处于隔开的上空(天性4:BFC正是页面上的3个隔开分离的单身容器),乳白块也不会惨遭深草绿浮动框的挤压。

从实质上代码来分析BFC

讲了这么多,仍旧比较难驾驭,所以上面通过一些例证来深化对BFC的认识。

视觉上它将内容与其余行内级成分排列为多行;典型的如段落内容,有文件(能够有种种格式譬如重视),或图片,都以行内级成分;

总结

上述就是BFC的分析,BFC的定义相比较空虚,但经超过实际例分析应该力所能及更好地领略BFC。在实际上中,利用BFC可以闭合浮动(实例二),幸免与变化成分重叠(实例四)。同时,由于BFC的隔开分离作用,能够应用BFC包括三个成分,幸免那几个因素与BFC外的因素发生margin
collapse。

转自

实例一

CSS

<style> * { margin: 0; padding: 0; } .left{ background: #73DE80;
/* 绿色 */ opacity: 0.5; border: 3px solid #F31264; width: 200px;
height: 200px; float: left; } .right{ /* 粉色 */ background: #EF5BE2;
opacity: 0.5; border: 3px solid #F31264; width:400px; min-height:
100px; } .box{ background:#888; height: 100%; margin-left: 50px; }
</style> <div class=’box’> <div class=’left’>
</div> <div class=’right’> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
* {
margin: 0;
padding: 0;
}
.left{
background: #73DE80; /* 绿色 */
opacity: 0.5;
border: 3px solid #F31264;
width: 200px;
height: 200px;
float: left;
}
.right{ /* 粉色 */
background: #EF5BE2;
opacity: 0.5;
border: 3px solid #F31264;
width:400px;
min-height: 100px;
}
.box{
background:#888;
height: 100%;
margin-left: 50px;
}
</style>
<div class=’box’>
<div class=’left’> </div>
<div class=’right’> </div>
</div>

来得效果:

金沙澳门官网 7

绿色框(’#left’)向左浮动,它成立了贰个新BFC,但暂且不探究它所创设的BFC。由于黄铜色框浮动了,它退出了本来normal
flow的职位,由此,石榴红框(’#right’)就被固定到玉高粱红父成分的左上角(性子3:成分右侧与容器左侧相接触),与转变浅深青莲框爆发了重叠。

再正是,由于花青框(’#box’)并从未创立BFC,因而在测算中度的时候,并没有设想粉色框的区域(性子6:浮动区域不叠加到BFC区域上),产生了莫大坍塌,那也是周边难点之一。

行内级元素生成行内级盒(inline-level boxes),参与行内格式化上下文(inline
formatting
context)。同时参加生成行内格式化上下文的行内级盒称为行内盒(inline
boxes)。全数display:inline的非替换到分生成的盒是行内盒;

实例二

到现在由此设置overflow:hidden来创立BFC,再看看效果如何。

XHTML

.BFC{ overflow: hidden; } <div class=’box BFC’> <div
class=’left’> </div> <div class=’right’> </div>
</div>

1
2
3
4
5
6
7
8
.BFC{
overflow: hidden;
}
 
<div class=’box BFC’>
<div class=’left’> </div>
<div class=’right’> </div>
</div>

金沙澳门官网 8

水晶色框成立了一个新的BFC后,中度发生了变动,总计低度时它将黄铜色框区域也设想进去了(本性5:总计BFC的可观时,浮动成分也参预总计);

而士林蓝框和浅绿灰框的体现效果如故没有其余变更。

不加入生成行内格式化上下文的行内级盒称为原子行内级盒(atomic inline-level
boxes)。这个盒由可替换行内成分,或display值为inline-block或inline-table的成分生成,不可能拆分成多少个盒;

实例三

现在,现将一部分小块添加到墨紫框中,看看效果:

XHTML

<style> .little{ background: #fff; width: 50px; height: 50px;
margin: 10px; float: left; } </style> <div class=’box BFC’>
<div class=’left’> </div> <div class=’right’> <div
class=’little’></div> <div class=’little’></div>
<div class=’little’></div> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.little{
background: #fff;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
</style>
 
<div class=’box BFC’>
<div class=’left’> </div>
<div class=’right’>
<div class=’little’></div>
<div class=’little’></div>
<div class=’little’></div>
</div>
</div>

金沙澳门官网 9

出于镉绿框没有开创新的BFC,由此普鲁士蓝框中橄榄棕块受到了深褐框的震慑,被挤到了右手去了。先不管这么些,看看淡褐块的margin。

匿名盒(anonymous box)

实例四

选用同实例二中同样的办法,为暗绿框创立BFC:

XHTML

<div class=’box BFC’> <div class=’left’> </div>
<div class=’right BFC’> <div class=’little’></div>
<div class=’little’></div> <div
class=’little’></div> </div> </div>

1
2
3
4
5
6
7
8
<div class=’box BFC’>
<div class=’left’> </div>
<div class=’right BFC’>
<div class=’little’></div>
<div class=’little’></div>
<div class=’little’></div>
</div>
</div>

金沙澳门官网 10

假如雪青框制造了新的BFC以往,海洋蓝框就不与海蓝浮动框发生重叠了,同时内部的灰色块处于隔开的上空(特性4:BFC正是页面上的三个切断的单身容器),月光蓝块也不会蒙受铁锈红浮动框的挤压。

匿名盒也有份匿名块盒与匿名行内盒,因为匿名盒没知名字,不能使用选取器来抉择它们,所以它们的具备属性都为inherit或开始暗许值;

总结

以上便是BFC的分析,BFC的概念比较空虚,但经超过实际例分析应该能够更好地通晓BFC。在实质上中,利用BFC能够闭合浮动(实例二),防止与转移成分重叠(实例四)。同时,由于BFC的割裂功用,能够应用BFC包括一个要素,制止那些因素与BFC外的成分发生margin
collapse。

如上边例子,会创键匿名块盒来含有毗邻的行内级盒:

参考

视觉格式化模型 |
MDN

块格式化上下文|
MDN

CSS之BFC详解

W3C
block-formatting

1 赞 5 收藏
评论

金沙澳门官网 11

XHTML

Some inline text

followed by a paragraph

followed by more inline text.

1

2

3

4

5

Some inline text

followed by a paragraph

followed by more inline text.

多个稳定方案

在定点的时候,浏览器就会依照成分的盒类型和上下文对这几个成分进行定位,能够说盒正是固定的宗旨单位。定位时,有三种永恒方案,分别是常规流,浮动已经相对定位。

常规流(Normal flow)

在常规流中,盒三个随后两个排列;

块级格式化上下文里面, 它们竖着排列;

行内格式化上下文里面, 它们横着排列;

当position为static或relative,并且float为none时会触发常规流;

对于静态定位(static positioning),position:
static,盒的岗位是常规流布局里的职分

对于相持固定(relative positioning),position:
relative,盒偏移地点由那一个属性定义top,bottom,leftandright。即使有偏移,还是保留原来的职位,别的常规流不能占据这几个职务。

浮动(Floats)

盒称为浮动盒(floating boxes);

它身处当前行的始发或最终;

以致常规流环绕在它的科学普及,除非设置 clear 属性;

相对定位(Absolute positioning)

相对定位方案,盒从常规流中被移除,不影响常规流的布局;

它的原则性绝对于它的盈盈块,相关CSS属性:top,bottom,left及right;

假使成分的质量position为absolute或fixed,它是相对定位成分;

对于position:
absolute,成分定位将相对于近期的三个relative、fixed或absolute的父成分,假若没有则相对于body;

块格式化上下文

到那里,已经对CSS的稳定有一定的询问了,从上边的信息中也得以识破,块格式上下文是页面CSS
视觉渲染的一有些,用于决定块盒子的布局及变化互相影响范围的2个区域

BFC的开创方法

根元素或任何富含它的因素;

浮动(元素的float不为none);

纯属定位成分(元素的position为absolute或fixed);

行内块inline-blocks(元素的display: inline-block);

报表单元格(成分的display: table-cell,HTML表格单元格暗许属性);

overflow的值不为visible的元素;

弹性盒 flex boxes(元素的display: flex或inline-flex);

但里边,最广大的就是overflow:hidden、float:left/right、position:absolute。也正是说,每回看到那个属性的时候,就意味着了该因素以及开创了一个BFC了。

BFC的范围

BFC的范围在MDN中是那般讲述的。

金沙澳门官网 ,A block formatting context contains everything inside of

the element creating it that is not also inside a descendant element

that creates a new block formatting context.

汉语的情趣贰个BFC包含创设该上下文成分的有所子元素,但不包蕴创设了新BFC的子成分的中间因素。

那段看上去有点奇怪,笔者是这么理解的,加入有上边代码,class名为.BFC代表创制了新的块格式化:

那段代码表示,#div_1开立了一个块格式上下文,这么些上下文蕴含了#div_2、#div_3、#div_4、#div_5。即#div_第22中学的子成分也属于#div_1所开创的BFC。但由于#div_5创造了新的BFC,所以#div_6和#div_7就被免去在外围的BFC之外。

本人认为,那从另一方角度表明,多个成分不能同时存在于八个BFC中

BFC的一个最重要的功用是,让处在BFC内部的元素与表面包车型大巴因素相互隔开分离,使内外因素的稳定不会相互影响。那是利用BFC清除浮动所接纳的特性,关于免去浮动将在后边讲述。

一经一个成分能够同时处于五个BFC中,那么就表示这一个因素能与三个BFC中的元素发生功用,就违反了BFC的隔绝成效,所以那几个只要就不成立了。

BFC的效果

就像刚刚提到的,BFC的最鲜明的职能便是建立2个隔开分离的空间,断绝空间内外因素间互动的作用。但是,BFC还有越多的特征:

Floats, absolutely positioned elements, block containers

(such as inline-blocks, table-cells, and table-captions) that are not

block boxes, and block boxes with ‘overflow’ other than ‘visible’

(except when that value has been propagated to the viewport) establish

new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one

after the other, vertically, beginning at the top of a containing block.

The vertical distance between two sibling boxes is determined by the

‘margin’ properties. Vertical margins between adjacent block-level boxes

in a block formatting context collapse.

In a block formatting context, each box’s left outer edge

touches the left edge of the containing block (for right-to-left

formatting, right edges touch). This is true even in the presence of

floats (although a box’s line boxes may shrink due to the floats),

unless the box establishes a new block formatting context (in which case

the box itself may become narrower due to the floats).

简简单单归结一下:

内部的盒会在笔直方向多个接叁个排列(能够用作BFC中有叁个的常规流);

居于同二个BFC中的成分相互影响,大概会时有发生margin collapse;

每种成分的margin box的左边,与容器块border
box的右侧相接触(对于从左往右的格式化,否则反而)。即使存在浮动也是那般;

BFC便是页面上的二个隔开的单身容器,容器里面包车型地铁子成分不会潜移默化到外边的要素,反之亦然;

总括BFC的惊人时,考虑BFC所蕴藏的有着因素,连浮动成分也参加总括;

转变盒区域不叠加到BFC上;

那样多属性有点难以知晓,但能够作如下推理来支援了然:html的根元素就是,而根成分会创设一个BFC,创立二个新的BFC时就也就是在那几个成分内部成立贰个新的,子成分的固定就好似在五个新页面中那么,而以此新旧html页面之间时不会互相影响的。

上述那么些掌握并不是最纯粹的敞亮,甚至是将因果倒置了(因为html是根成分,由此才会有BFC的特征,而不是BFC有html的特点),但诸如此类的推理可以支持理解BFC那么些定义。

从实际上代码来分析BFC

讲了那般多,依然相比难掌握,所以上边通过一些事例来深化对BFC的认识。

实例一

CSS

* {

margin: 0;

padding: 0;

}

.left{

background: #73DE80; /* 绿色 */

opacity: 0.5;

border: 3px solid #F31264;

width: 200px;

height: 200px;

float: left;

}

.right{ /* 粉色 */

background: #EF5BE2;

opacity: 0.5;

border: 3px solid #F31264;

width:400px;

min-height: 100px;

}

.box{

background:#888;

height: 100%;

margin-left: 50px;

}

*{

margin:0;

padding:0;

}

.left{

background:#73DE80;/* 绿色 */

opacity:0.5;

border:3pxsolid#F31264;

width:200px;

height:200px;

float:left;

}

.right{/* 粉色 */

background:#EF5BE2;

opacity:0.5;

border:3pxsolid#F31264;

width:400px;

min-height:100px;

}

.box{

background:#888;

height:100%;

margin-left:50px;

}

展现效果:

金沙澳门官网 12

绿色框(’#left’)向左浮动,它创立了贰个新BFC,但权且不商讨它所创设的BFC。由于日光黄框浮动了,它退出了原本normal

flow的位置,因此,粉色框(’#right’)就被定位到樱草黄父成分的左上角(性情3:成分右侧与容器右边相接触),与转变深褐框产生了重叠。

与此同时,由于灰褐框(’#box’)并从未开创BFC,因而在总括中度的时候,并不曾设想黄色框的区域(天性6:浮动区域不叠加到BFC区域上),发生了惊人坍塌,那也是周边难点之一。

实例二

现行反革命通过安装overflow:hidden来创设BFC,再看看效果怎样。

XHTML

.BFC{

overflow: hidden;

}

8.BFC{

overflow:hidden;

}

鲜青框创立了叁个新的BFC后,高度发生了转移,计算高度时它将灰白框区域也考虑进来了(天性5:总计BFC的中度时,浮动成分也加入总计);

而红棕框和郎窑红框的显得效果依旧没有此外变化。

实例三

明日,现将有个别小块添加到栗褐框中,看看效果:

XHTML

.little{

background: #fff;

width: 50px;

height: 50px;

margin: 10px;

float: left;

}

.little{

background:#fff;

width:50px;

height:50px;

margin:10px;

float:left;

}

鉴于浅雪青框没有创制新的BFC,由此鲜蓝框中淡黄块受到了棕黄框的震慑,被挤到了左侧去了。先不管这么些,看看茶青块的margin。

实例四

接纳同实例二中千篇一律的方法,为土褐框创立BFC:

XHTML

一旦鲜绿框创设了新的BFC以往,深翠绿框就不与洋蓟绿浮动框发生重叠了,同时中间的海军蓝块处于隔开分离的上空(天性4:BFC正是页面上的二个割裂的单身容器),紫铜色块也不会遭到中蓝浮动框的挤压。

总结

以上即是BFC的分析,BFC的概念比较空虚,但经超过实际例分析应该能够更好地通晓BFC。在实质上中,利用BFC能够闭合浮动(实例二),防止与转移成分重叠(实例四)。同时,由于BFC的割裂成效,能够选用BFC包含2个要素,制止那么些因素与BFC外的成分发生margin

collapse。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图