BFC
是什么
我们在页面布局的时候，经常出现以下情况：
- 这个元素高度怎么没了？
- 这两栏布局怎么没法自适应？
- 这两个元素的间距怎么有点奇怪的样子？
- ......
原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念。
BFC(Block Formatting Context)，即块格式化上下文。它是页面中的一块渲染区域，并且有一套属于自己的渲染规则。目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。
触发条件
MDN 的这篇文章 列举了所有触发条件。以下是几个常见的触发条件：
- 浮动元素（
float值不为none） - 绝对定位元素（元素的
position为absolute或fixed） - 行内块元素（
display值为inline-block） overflow值不为visible、clip的块元素- 弹性元素（
display为flex或inline-flex元素的直接子元素）
解决的问题
- 清除浮动（为什么不用 .clearfix 呢？）
- 防止 margin 合并
- 某些古老的布局方式会用到（已过时）
优缺点
没有优点，但是有副作用。不过使用最新的 display: flow-root 来触发 BFC 就没有副作用了。
CSS选择器优先级
建议查看 CSS 2.1 规格文档的权威算法（但并不适用于 CSS 3）
- 选择器越具体，其优先级越高。
- 相同优先级，出现在后面的，会覆盖前面的。
- 属性后面加 !important 的优先级最高，但是要少用，因为一个项目中用的多了，也就不优先了。
如何清除浮动
方法一
给父元素加上.clearfix
.clearfix:after{
content: '';
display: block; /*或者 table*/
clear: both;
}
.clearfix{
zoom: 1; /* IE 兼容*/
}
方法二
如上所述，BFC具有清除浮动的作用，所以我们给父元素加上 overflow:hidden，触发BFC即可。
不过现在都支持flex了，使用flex就不用关注浮动啦！
两种盒模型（box-sizing）的区别
content-box
width 指定的是 content 区域宽度，而不是实际宽度。
实际宽度 = width + padding + border
border-box
width 指定的是左右边框外侧的距离。
实际宽度 = width
两个盒模型相同点是都是用来指定宽度的，不同点是 border-box 更好用。
