CSS
BFC
概念：块级格式化上下文，BFC简单来说就是完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。
- 触发方法：
- overflow: hidden;
- display: inline-block/table-cell/flex;
- position: absolute/fixed;
- BFC的规则：
- BFC就是一个块级元素，块级元素会在垂直方向上一个接一个的排列
- BFC就是页面中一个隔离的独立容器，容器中的标签不会影响到外部标签
- 垂直方向的距离有margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
- 计算BFC高度时，浮动元素也参与计算。
- BFC解决了什么问题
- 使用float脱离文档流，高度塌陷
- margin边距重叠
css盒模型
- 标准盒模型：范围包括margin，border，padding，content，并且width和height指的就是内容的宽度和高度。增加内外边距，边框不会影响内容区域的大小，但是会增加元素框的总尺寸。
- IE盒模型：范围包括margin，border，padding，content，但是width和height指的是内容区域+border+padding的宽度和高度
- 相关属性：box-sizing: context-box(默认，标准盒子）|border-box（IE盒子）|inherit;
- display-clip:(背景颜色覆盖）border-box（默认）|context-box;
