HTML

CSS

flex 布局

BFC

参考回答：

首先，BFC 是块级格式化上下文（Block Formatting Context），它是指一个独立的块级渲染区域，只有块级盒子参与，这个区域拥有一套自己的渲染规则来约束块级盒子的布局，不会影响到盒子外部的元素。

没有形成 BFC 会出现的现象：盒子不设置高度也不设置浮动，则当盒子的子元素（子盒子）都设置了宽高和浮动的时候，这个盒子有宽度，但是没有高度，即没有形成 BFC。

创建 BFC 的方法：

1. 让 float 的值不为 none
2. position 的值不是 static 或者 relative
3. display 的值不是 inline-block，flex 或者 inline-flex
4. overflow: hidden；

创建时最好选择第 4 点，这样既可以让盒子变成 BFC，也可以保持它是块级盒子的这个特性

BFC 可以解决的问题：

1. margin 塌陷；
2. BFC 可以阻止元素被浮动元素覆盖；

什么是 margin 塌陷，即盒子没有设置 BFC 导致，盒子中的子元素设置 margin 时，该盒子也被带上 margin

参考：

www.bilibili.com/video/BV1sN… juejin.cn/post/695008…

CSS 盒模型

参考回答：

css 中任何一个元素都可以看成是一个盒子，这些盒子由 4 个部分组成，分别是外边距（margin）、边框（border）、内边距（padding）、内容（content），css 盒子模型有两种，分别是 W3C 的标准盒子模型和 IE 盒子模型，标准盒子模型认为一个盒子的实际尺寸包括内容、内边距和边框，IE 盒子模型认为盒子的实际尺寸就是盒子的 width 和 height 属性决定的，在 IE 盒子模型中，width 和 height 属性包括了内容、内边距和边框，标准盒子模型中 width 和 height 属性只包括内容，而不包括内边距和边框，然后可以通过 box-sizing 这个属性为 content-box 来设置盒子为标准盒模型， border-box 来设置盒子为 IE 盒子模型。