css有三种定位模式：常规流，浮动和绝对定。除了浮动元素和绝对定位元素以及根元素以外的元素都在常规流中（in flow）。
在常规流中的盒子，属于块级格式化上下文或行级格式化上下文，会遵循一定的规则摆放。
Fomatting Context也就是格式化上下文可以理解成盒子在常规流中遵从的摆放规则。
BFC(Block Formatting Context)是一个面试常见的考察点，即块级格式化上下文。属于块级上下文的盒子遵从以下的规则布局：
- 盒子在容器内（containing block）中是从上倒下一个一个垂直摆放的；
- 两个兄弟盒子之间的垂直距离由margin决定；
- 同一个BFC内的垂直距离会合并；
- 盒子的左边元挨着包含块的左边；
下面重点看一下浮动
浮动元素就如它的名字一样，会脱离常规流漂浮在包含块的左边（）或者右边，漂浮到包含块的边缘或者是挨着其他的包含块，就好比，一艘船要靠岸，岸边已经停了船，那么只能排队停在旁边了，当一排摆不下的时候还会被挤到下一排。
此外，浮动元素对其后面流内的块级和行级元素的影响不同，对块级元素没影响，但是行级元素会变短以避开浮动元素，好比word里面的图片环绕模式。
清除浮动使用clear属性（left｜right｜both），表示元素的哪一边不能与之前的浮动框相邻,但要注意的是这时候块级元素不再是当浮动元素不存在了，而是避开浮动元素移动到了浮动元素的后面。
清除浮动可以使用generate content来做：
定义一个class名字叫做clearfix，加在浮动元素的父级元素上
.clearfix::after{
content:' ';
clear:both;
display:block;
height:0;
overflow:hidden;
}
当然也可以使用before加在不想被浮动元素影响的元素上。
触发BFC也可以用来清除浮动，而且可以轻松的实现两栏布局
这是因为BFC规定：
- BFC内的浮动元素不影响BFC外的元素；
- 高度包含其内部浮动元素的高度；
- BFC不会和浮动元素重叠；
- 可以利用overflow：hidden来触发（overflow非visible）；
- 浮动，绝对定位和inline-block都会触发BFC；
BFC的作用：
- 清除浮动；
- 防止margin折叠
- 两栏布局
