一分钟学会CSS题目如何解答？

1.BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的左外边缘(margin-left)，与包含块的左边(border-left)相接触(对于从左往右的格式化，否则相反)。在北大青鸟培训中Web前端开发中说到即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。

BFC的区域不会与floatbox重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

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

2.FC(FormattingContext)

想要理解BFC与IFC，首先要理解FC，即formattingcontext，它是W3CCSS2.1规范中的一个概念，定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

北大青鸟Web前端开发工程师培训中常见的FormattingContext有：BlockFormattingContext(BFC|块级格式化上下文)和InlineFormattingContext(IFC|行内格式化上下文)。

一个页面是由很多个Box组成的，元素的类型和display属性决定了这个Box的类型。不同类型的Box，会参与不同的FormattingContext。

Blocklevel的box会参与形成BFC，比如display值为block，list-item，table的元素。

Inlinelevel的box会参与形成IFC，比如display值为inline，inline-table，inline-block的元素。

参考：

W3C文档block-level

W3C文档inline-formatting

3.怎样形成一个BFC?

块级格式化上下文由以下之一创建：

根元素或其它包含它的元素

浮动(元素的float不是none)

绝对定位的元素(元素具有position为absolute或fixed)

元素具有display:inline-block，table-cell,table-caption,flex,inline-flex

对于BFC规范中的块级要如何理解?下面广州北大青鸟web培训小编就从5个方面给大家做个分析，先看IFC布局规则，在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点就是包含块的顶部。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。水平方向上的margin，border和padding在框之间得到保留。包含那些框的长方形区域，会形成一行，叫做行框。