CSS面试题中盒子模型和BFC整理

css基础知识：

盒子模型
简单来说就是css中并不是我们以为的一个width和height就是盒子的宽高了，还要考虑margin，padding，boder三个一起，但是不同浏览器对于这三个的标准又不同，与盒子模型相对于的属性是box-sizing。
盒子模型有两种，分别是w3c的标准盒子模型，一种是IE的盒子模型。
w3c的盒子模型中，width指的是content，排除了margin，border，padding，
IE的盒子模型中，width表示的是content+padding+border三部分的宽度，也就是排除了margin之后的宽度
box-sizing的作用是切换盒子模型
box-sizing:content-box这个是w3c盒子模型
box-sizing:border-box这个是IE盒子模型
其默认属性是content-box
- BFC
  首先对于BFC我觉得是理解定义等，找到起源，对于定义等我们可以看看MDN网站上BFC的。

本身格式化上下文有三种类型：分别是块格式化上下文（block formatting context）、内联格式化上下文（inline formatting context）、灵活格式化上下文（flex formatting context）
页面上的所有内容都是格式化上下文的一部分,或者是已定义为以特定方式布局内容的区域。块格式化上下文（BFC）将根据块布局规则布局子元素，灵活格式化上下文将其子元素布局为灵活项等。每个格式上下文都有关于布局在该上下文中的行为的特定规则。
文档中使用块布局规则的最外层元素建立第一个或初始块格式上下文。这意味着<html>元素块中的每个元素都是按照正常流程块和内联布局规则进行布局的。参与BFC的元素使用css盒子模型概述的规则，该模型定义了元素的边距、边框和填充如何与同一上下文中的其他块交互。

创建新的块格式化上下文

<html>元素不是唯一能够创建块格式化上下文的元素。默认为块布局的任何元素也会为其后代元素创建格式化上下文。此外，还有一些css属性可以导致创建一个bfc，即使默认情况下它不这样做。着很有用，因为新的bfc的行为与最外层的文档非常相似，因为它在主布局中变成了一个小布局。BFC 包含其内部的所有内容，float和clear仅适用于同一格式化上下文中的项目，而页边距仅在同一格式上下文中的元素间折叠。除了文档的根元素<html>外，还将在以下情况下创建一个新的BFC：

elements made to float using float
absolutely positioned elements (including position: fixed or position: sticky
elements with display: inline-block
table cells or elements with display: table-cell, including anonymous table cells created when using the display: table-* properties
table captions or elements with display: table-caption
block elements where overflow has a value other than visible
elements with display: flow-root or display: flow-root list-item
elements with contain: layout, content, or strict
flex items
grid items
multicol containers
elements with column-span set to all

过去典型的一种方法是设置overflow:auto或设置其他值而不是overflow:visible的初始值。
设置溢出：自动创建包含浮动的新BFC。现在，我们的DIV在布局中变成了一个迷你布局。任何子元素都将包含在其中。
使用溢出创建新的bfc的问题在于，溢出属性用于告诉浏览器您希望如何处理溢出的内容。在某些情况下，当您纯粹使用此属性创建bfc时，您会发现不需要的滚动条或剪切阴影。另外，对于未来的开发人员来说，它可能不太可读，因为不太明显为什么要使用溢出来实现这一目的。如果您这样做，最好对代码进行注释以进行解释。

使用display:flow-root显式创建BFC

使用包含块上的display:flow-root（或display:flow-root-list-item）将创建一个新的BFC，而不会产生任何其他潜在的问题副作用。
流根”关键字的名称指的是这样一个事实，即您创建的内容本质上类似于一个新的根元素（如<html>所做），前提是新上下文是如何创建的，其流布局功能也是如此。