定位元素
盒模型，就是浏览器为每一个 HTML 元素生成的矩形盒子，这些盒子按照可见版式模型在页面上排布。
可见的页面版式由三个属性控制：position、display、float。
position，控制页面上元素间的关系。
display，控制元素是堆叠、并排显示呢？还是隐藏不可见？
float，提供控制的方式，以便把元素组成多拦布局。
元素的盒子由 外边距 + 边框 + 内边距 + 内容 组成。
1、相邻盒子的垂直外边距会进行叠加，始终使用最大的外边距值。
2、如果不设置块级元素的 width 属性，那么这个属性的默认值是 auto，结果会让元素的盒子宽度扩展到与父元素同宽。
如果增大水平边框、内边距、外边距，就会导致内容宽度减少。
3、为块级元素 width 属性设置了固定宽度后，盒子的宽度就不会再扩展到与父元素同宽了。
为设定宽度的盒子增加边框、内边距、外边距，会导致盒子的宽度增大。如果盒子宽度超过窗口宽度，就会出现滚动条。
实际上，此时的 width 指的是内容宽度。
浮动 float 与 清除 clear
float，把元素从文档流中拿出来，浮动元素脱离了文档流后，原来紧跟其后的元素就会在空间允许的情况下，
尽量往上提升到与浮动元素平起平坐。
如果不想让浮动元素后面的元素提升到与浮动元素平起平坐，那么必须给后面的元素使用clear。
[如何让父元素围住浮动的子元素]，有三种方法，
<section>
<img src="xx.png">
<p>I love U， ALINA</P>
</section>
1）为父元素添加 overflow:hidden
section { ...; overflow: hidden; }
img { float: left; }
此方法比较简单，但是不太直观。设置后，强制父元素包围浮动子元素。
实际上，overflow:hidden 的真正用途是切掉太大子元素的多余部分，保持父元素的宽度不变。
2）同时浮动父元素
section { ...; float: left; width: 100%; }
img { float: left; }
浮动父元素以后，不管其子元素是否浮动，它都会紧紧地包围住子元素。因此，需要用 width:100% 再次让父元素与
浏览器窗口同宽。
3）添加非浮动的清除元素
给父元的最后添加一个非浮动的子元素，然后清除该子元素。由于父元素一定会包围非浮动的子元素，而且清除
会让这个子元素位于浮动元素的下方，因此，父元素也一定会包围住浮动子元素。
此种方法有两种实现思路，
第一种，在父元素内部最后添加一个纯表现的 div 元素，
<section>
<img src="xx.png">
<p>I love U， ALINA</P>
<div style="clear:left"></div>
</section>
第二种，给父元素添加一个 class 类，
section.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
static 静态定位
文档流中的元素默认都是 static 静态定位。
relative 相对定位
相对于文档流中的原始位置进行相对定位，除了元素自己相对于原始位置挪动了一下之外，页面没有发生任何变化。
也就是说，“相对元素” 原来占据的空间还被保留着，后面的元素也在自己的位置上，不会前移去占据“相对元素”的位置。
absolute 绝对定位
绝对定位与相对定位不一样，绝对定位会把元素彻底从文档流中拿出来，也就是说，“绝对元素” 原来占据的空间不再保留，
后面的元素会占据“绝对元素” 原来的位置。
由于“绝对元素” 脱离了文档流，因此，绝对定位一定要有上下文来定位。
一般情况下，如果父元素的定位方式是 relative 、absolute、fixed 时，则上下文就是父元素。
如果父元素没有设置（默认为 static ）时，则上下文就是 body 元素。
fixed 固定定位
固定定位与绝对定位非常类似，都是彻底脱离文档流。不同之处在于，固定定位的上下文始终是浏览器窗口。
不会随页面的滚动而滚动。
