文档流
文档流为元素没有改变特性时原本所要排列的位置和规则：
文档流为最底层
块级 独占一行等在最底层排列，依次往下排列。
给上浮动之后，会把元素堆积起来，不占文档流的位置。
浮动 可以让元素脱离文档流。
浮动元素
浮动元素在文档流内不占位置，后面的文档流元素，就会占住浮动元素原来的位置。但是文字不会藏在浮动元素下面，因为一开始浮动元素出来的目的是为了做出图文环绕的效果。浮动对文字的影响：文字会环绕浮动元素。
但是浮动元素在同一层，同样为浮动元素会展示出相邻的效果，不是覆盖。
作用：
让元素既能布局，又能横排显示。
浮动元素特性
任何元素，不管是块级元素还是行内元素，只要是给了浮动，就含有以下浮动特性：
一、浮动元素不占文档流的位置。
二、浮动元素可以和浮动元素横排显示。
三、支持宽高。
四、支持margin和padding，不支持margin auto。
和行内块的区别：
1、不会解析空格。
2、不会存在垂直对齐问题。
3、脱离文档流。
遇到的情况
一、父级宽度不够，浮动元素掉下来
要么增大父级盒子宽度，要么缩小浮动元素宽度。
二、浮动元素被卡住
1、上一行的浮动元素height过高。
2、上一行的浮动元素margin-top或者margin-bottom过多，用hover的时候会被卡住，所以尽量hover不用margin-top。
清除浮动带来的问题
浮动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。
浮动元素本身不能清除浮动。
清除浮动对于父级造成的高度塌陷的问题：
1、给父级设置固定高度（不灵活，一般是由内容撑开。）
2、给父级来overflow:hidden;，溢出隐藏，会检测到子级的内容，并把子级包裹。
3、给父级的内容最后添加一个空的块级标签。例如在div标签下添加h1标签：
h1{
clear:both;//清除浮动防止父级高度塌陷。
}
但是不适合ul li这种严格的父子级标签，缺点是造成代码冗余添加了无用的空标签。
4、给父级添加一个display:inline-block;，但是不要使用，因为会产生解析空格和基线对齐的问题。
5、如果父级是浮动元素的话，那么高度不会塌陷，但是要给父级的父级清除浮动。
6、伪元素 通过CSS创建的一个没有名字的行内元素，一般是装小图标做小东西。
:before 在内容之前添加伪元素。
:after 在内容之后添加伪元素。
例
div:before{
content:"hello";
}
清除浮动，给父级最后添加伪元素：
给页面内所有浮动元素都添加上class=clearfix，这是清除浮动的终极方法。
.clearfix:after{
display:block;//创建块级标签，如方法3
content:"";//让块级标签内容为空。
clear:both;//清除浮动。
}
低版本ie需要加上：
.clearfix{
zoom:1;
}
怪异盒模型
一般在移动端里使用居多。
标准和模型里 width和height是内容区域的宽高。
整个盒子的实际大小就是内容区域+padding+border
转化为怪异盒模型：
box-sizing:border-box;
怪异盒模型里，width和height是整个盒子的大小。
内容区域的大小=width*height-padding-border