CSS定位机制
可以CSS中的流分为三种：普通流、浮动流和定位流。float不为none的元素会产生浮动流漂浮于文档流智商，按照某个方向进行浮动，移动到父级元素的边界或者遇到另外一个浮动元素就会停止。
另外如果两个div元素在垂直方向上会出现外边距（margin）合并的情况，但是浮动元素不会。
浮动元素会创建包含块。浮动元素的包含块是离其最近的块级祖先元素。浮动元素会生成一个块级框，无论这个元素本身是行内元素还是块级元素。
浮动元素的危害
CSS的浮动就像是一把双刃剑，有利也有弊。在布局的时候使用到float会使得布局更加灵活，但是有时候却会导致一些危害
危害在于：
多个同级元素，前者设置了浮动，后者会自动向前填充造成重叠
子元素浮动，父元素为设置高度，造成父元素的高度坍塌
原因在于：CSS规定，用户代理可以不必重新显示已经显示的内容来适应文档中后来出现的内容，所以这就会导致重叠的出现。
如果行内框与浮动元素重叠了，行内框的背景、边框和内容都在浮动元素智商；如果与块级框的内容在浮动元素之上，而边框和背景都在其之下
如何清楚浮动
关于如何清楚浮动，个人认为可以分为两大招：添加元素和创建BFC
1. 添加clear : both, left, right
给浮动元素添加一个兄弟元素，并且将其clear设置为both。clear的工作是增加了一个清除区，在清除元素的上边距之外，不允许任何浮动元素的加入，其实它本身的外边距并没有发生变化，下移是因为增加了清除区
2. 添加br标签
利用br标签本身具有的html属性clean = all | left | right | none;来清除浮动
3. 利用伪元素
可以给浮动元素的父元素或者兄弟元素添加伪元素::after或者::before
(顺便补充一句，关于::和:，使用:来添加伪元素也是可以的，但是CSS3的规定，伪元素使用::。但是目前浏览器对两种写法都能整人处理)
parent:after{
content: ” . “;
clear: both;
display: block;
height: 0px;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
(关于hasLayout文章末尾有说明)
4. 利用触发BFC=block formatting COntexts，块级格式化上下文
因为BFC元素会产生一个独立的渲染区域，其包含的子元素的浮动不会影响的外部元素。根据BFC触发的条件，我们可以将浮动元素的父元素声明为一个BFC从而清除浮动
常见的有：
.parent {
overflow: auto;/或者visible/
zoom: 1;/在ＩＥ下触发其layout/
}
哪种好用就用哪种吧。嘻嘻
Block Formatting Context
块级格式化上下文指的是一个独立的块级渲染区域，不影响其他的元素，这个元素遵循一套自己的渲染方案。有五种方式可以来生成这样的一个块级元素
根元素或者包含根元素的元素
position不为static的元素
float不为none的元素
overflow不为visible 的元素
display为flex、inline-block、和table-cell的元素
它的布局规则是
BFC可以看成是一个页面的隔离（看作新的“html”）
内部元素会在垂直方向上排列，也就是BFC中的正常文档流（跟我们认为的HTML的文档流规则一样）
元素的垂直距离由margin决定，BFC内部元素在垂直方向上还是会出现margin重叠的现象。但是两个BFC元素不会出现外边距重叠
无论是浮动还是正常元素都不能超过这个BFC块
计算高度时候会把float元素包含进去
使用场景：
1.解决margin重叠问题：如果相邻的垂直元素同时设置了margin后，会以高的元素的margin为准
可以将其中一个元素添加一个父元素，并且让父元素生成生成一个BFC，这样两个元素处于不同的BFC中就可以解决maigin重叠问题了：
- 就是解决浮动问题
hashLayout
layout是IE渲染引擎内部组成的部分。在IE浏览器中，一个元素要么针对自己的内容进行组织和计算，要么依赖于包含块。所以为了协调这两种方式之间的矛盾，渲染引擎采用“haslayout”属性，属性值可以为true或者false，如果为false表示这个元素拥有一个布。
IE中有布局的元素是由自身来控制布局的，这点和BFC很像。触发haslayout就类似与触发BFC让这个元素内部的布局自成一体
Inline Fornatting Context（IFC）
内联格式化上下文。它的高度（行高）是由最大行内框高度决定的，不受到垂直方向上的padding和margin的影响。IFC中不能有块级元素，如果在IFC中插入一个块级元素会将两个IFC与div分开，每个IFC都表现为一个与块级元素并排排列
水平居中：当一个块要在环境中水平居中时候，设置设置为inline-block，其父元素的text-align设置为center，可以实现水平居中
垂直居中：创建一个IFC，然后设置vertical-align:middle，元素则可以此父元素下垂直居中