摘要：属于同一个的两个相邻的会发生重叠。的区域不会与重叠。计算的高度时，浮动元素也参与计算。给添加，触发新的，则行内级格式化上下文如何生成由的非替换元素生成。元素会位于与与之间，使得宽度缩短。
block-level box: display属性为block, list-item, table的元素，会生成block-level box。并且参与block fomatting context。
inline-level box: display属性为inline, inline-block, inline-table的元素，会生成inline-level box。并且参与inline formatting context。
run-in box: css3中才有。
BFC（Block Formatting Contexts）块级格式化上下文块格式化上下文（block formatting context）是一个独立的渲染区域，容器里面的子元素不会在布局上影响到外面的元素。只有Block-level box参与， 它规定了内部的Block-level Box如何布局。块格式化上下文包括了创建该上下文的元素的所有子元素，但不包括创建了新的块格式化上下文的子元素。
如何生成根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
布局规则内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。
应用解决margin重叠问题
解决float导致高度塌陷问题
解决文字环绕问题（该方法可用于自适应布局）
例如：
.containbox {
border: 1px solid black;
width: 300px;
height: 300px;
}
.leftbox {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.rightbox {
height: 250px;
background-color: #fff500;
}
rightbox占满containbox的整个宽度。但是因为rightbox中的文字会为leftbox让位，所以看起来的效果就像是rightbox自动占满了剩余空间，超过leftbox高度部分的rightbox的左边框紧贴containbox的左边。
给rightbox添加overflow: hidden，触发新的BFC，则
IFC（Inline Formatting Contexts）行内级格式化上下文 如何生成由display:inline 的非替换元素生成。可替换行内元素，或 display 值为 inline-block 或 inline-table 的元素不能生成IFC，因此不能拆分成多个盒。
例如：
.containbox {
border: 1px solid black;
width: 12em;
}
span 里的文本 可以分成多行,因为它 是个行内盒。
给innertext添加display: inline-block，则span里的文本因为剩余空间放不下，就另起一行开始放。
布局规则内部的盒子会在水平方向，一个接一个地放置。
这些盒子垂直方向的起点从包含块盒子的顶部开始。
摆放这些盒子的时候，它们在水平方向上的 padding、border、margin 所占用的空间都会被考虑在内。
在垂直方向上，这些框可能会以不同形式来对齐（vertical-align）：它们可能会使用底部或顶部对齐，也可能通过其内部的文本基线（baseline）对齐。
能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和存在的浮动来决定。
IFC中的 line box 一般左右边都贴紧其包含块，但是会因为float元素的存在发生变化。float 元素会位于IFC与与 line box 之间，使得 line box 宽度缩短。
IFC 中的 line box 高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同（比如一行包含了较高的图片，而另一行只有文本）
当 inline-level boxes 的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性来确定，如果取值为 justify，那么浏览器会对 inline-boxes（注意不是inline-table 和 inline-block boxes）中的文字和空格做出拉伸。
当一个 inline box 超过 line box 的宽度时，它会被分割成多个boxes，这些 boxes 被分布在多个 line box 里。如果一个 inline box 不能被分割（比如只包含单个字符，或 word-breaking 机制被禁用，或该行内框受 white-space 属性值为 nowrap 或 pre 的影响），那么这个 inline box 将溢出这个 line box。
line box 的生存条件是在IFC中并且包含inline-level元素，如果line box里没有文本，空白，margin/padding/border 非0的行内元素，以及其他常规流中的内容(比如，images，inline blocks 和 inline tables)， 并且不是以换行结束的，将被当作零高度行框对待，也将会被视为没有意义。
注意：
在IFC的环境中，是不能存在block-level元素的，如果将block-level元素插入到IFC中，那么此IFC将会被破坏掉， 而block-level元素前的元素和block-level元素后的元素将会各自自动产生一个匿名容器其包围，这个匿名的容器内部环境将是一个新的 IFC。
设置一个块为 inline-block ，以单个封闭块来参与外部的 IFC，而内部则生成了一个 BFC。
参考自：
视觉格式化模型
KB010: 常规流
Inline formatting contexts
谈谈一些有趣的CSS题目
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111848.html
摘要：完整的说法是属于同一个的俩个相邻的的会发生重叠，与方向无关。元素会位于与与之间，使得宽度缩短。简单的说，有了之后，布局不再局限于单个维度了。 什么是FC？ Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context，块级格式...
摘要：完整的说法是属于同一个的俩个相邻的的会发生重叠，与方向无关。元素会位于与与之间，使得宽度缩短。简单的说，有了之后，布局不再局限于单个维度了。 什么是FC？ Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context，块级格式...
摘要：行宽的高度为包含框的高度，高度为行框中最高元素的高度。行框的宽度容纳不下子元素时，子元素会换到下一行显示，并且会产生新的行框。 一、BFC Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。 （可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素）。 1、BFC的布局规则例如以下： ①.内...
摘要：行宽的高度为包含框的高度，高度为行框中最高元素的高度。行框的宽度容纳不下子元素时，子元素会换到下一行显示，并且会产生新的行框。 一、BFC Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。 （可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素）。 1、BFC的布局规则例如以下： ①.内...
阅读 3640·2021-10-13 09:40
阅读 3118·2021-10-09 09:53
阅读 3527·2021-09-26 09:46
阅读 1811·2021-09-08 09:36
阅读 4218·2021-09-02 09:46
阅读 1293·2019-08-30 15:54
阅读 3050·2019-08-30 15:44
阅读 1005·2019-08-30 11:06
