CSS布局及浮动
从上图中可以看到，一个盒子从里到外有四个层次：最里面的是内容区域，包含元素本身的内容；紧接着是填充区域；然后是边框；最后是空白区域。内容区域的宽度和高度的确定比较复杂，需要综合考虑样式
width和 height的值，以及该盒子中包含的其它盒子的类型。填充区域、边框和空白区域的上、下、左、右四个方位的宽度都可以通过样式 padding、border和margin来分别指定。通过样式
background指定的背景颜色或图片可以应用在内容区域、填充区域和边框上。空白区域（margin）总是透明的，不会应用背景样式。
布局和定位
浏览器在渲染 HTML 页面的时候，所进行的操作就是把上面提到的文档树上的元素所对应的盒子，按照一定的规则进行排列。
盒子类型：
不同的盒子类型在布局时的行为不一样。盒子的类型是由生成它的元素的类型来决定的。通过样式display可以指定元素的类型。该样式可以使用的值很多，主要的有block、inline、inline-block和none等。样式display的值为block的元素称为块级元素（block-level
element），它们所生成的盒子是块盒子；display的值为 inline或 inline-block的元素称为行内元素（inline-level
element），它们所生成的是行内盒子。
- 块盒子（block box）：块盒子中只能仅包含块盒子或是行内盒子，不能同时包含两者。
- 行内盒子（inline box）：行内盒子把其中包含的盒子按照水平方向排成一行来显示。
包围块：
在对页面上的元素进行定位的时候，包围块（containing block）是个很重要的概念。很多时候都需要根据其包围块来确定某元素对应的盒子的位置和大小。包围块的确定并不复杂：对于文档根元素，其包围块是浏览器的窗口；如果元素的样式 position的值是 static或 relative，则其包围块是最近的块级祖先元素的内容区域；如果样式 position的值是 fixed，则其包围块是浏览器的当前视口（viewport）；如果样式 position的值是 absolute，则首先在祖先元素中寻找样式 position的值是 absolute、relative或 fixed的元素。找到这个元素之后，如果该元素是行内元素，则包围块由所生成的盒子的填充边界来确定，如果是块级元素，则包围块是该元素的填充区域。
元素的定位由样式 position的值来确定，该样式的默认值是 static，其它可选的值有 absolute、relative和 fixed。样式 position的值为 static的值称为非定位元素，其它的称为定位元素。
在 CSS 中，一个盒子可能有三种定位方式：普通流、浮动和绝对定位。通过样式 position和 float的值可以控制所采用的定位方式。
正常文档流
正常文档流是按照盒子的类型来定位的。每个盒子都会属于某个格式化上下文中，块或是行内的。块格式化上下文会按照从上到下的垂直顺序来排列盒子。行内格式化上下文则按照水平顺序来排列盒子，从左到右还是从右到左取决于文档的顺序。
通过将样式 position的值设为 relative，可以把当前元素的盒子设成相对定位的。相对定位的盒子首先按照正常文档流来排列，然后再根据其样式 left、right、top和 bottom的值来相对原始位置进行偏移。在它之后出现的盒子不受偏移的影响，就好像它还在原始位置一样。相对定位盒子的一个常见的作用是作为其绝对定位的子盒子的包围块。
浮动定位
通过将元素的样式 float的值设为 left或 right，可以使得该元素对应的盒子在当前行上向左或向右浮动。浮动的盒子会尽可能的向左或向右移动，直到接触到包围块或是另外一个浮动盒子的边界。如果当前行没有足够的空间给浮动盒子，该盒子会往下移动直到有足够的空间为止。
浮动的盒子不属于正常文档流的一部分。在浮动盒子之前和之后的非定位块盒子按照其在正常流中的位置排列，相当于浮动盒子不存在一样。而浮动盒子之后的行内盒子则会被缩短，紧跟在浮动盒子的后面。所形成的效果就是后面的行内盒子包围着浮动的盒子。在网页中文字环绕图片的效果就可以通过这种方式来实现。通过样式 clear可以强制盒子不跟在浮动盒子的后面。
绝对定位
将样式 position的值设为 absolute或 fixed，使得元素对应的盒子变成绝对定位。绝对定位的盒子被从正常文档流中完全移除，对相邻的盒子没有任何影响。绝对定位的盒子的位置是相对其包围块来确定的。具体的位置由样式 left、right、top和 bottom来确定。
有关浮动的理解：参见http://www.iyunlu.com/view/css-xhtml/55.html
浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
浮动元素的副作用：
（与浮动元素位于同一容器中的元素）1. 块状元素，会钻进浮动元素的下面，被浮动元素所覆盖
2. 行内元素，例如文字， 则会环绕在浮动元素的周围，为浮动元素留出空间
3. 浮动元素的父元素坍缩
如果子盒子是浮动的，父盒子不浮动那么子盒子的位置是脱离父盒子的束缚，其位置也是根据文档流中上一个已经定位的元素来决定他的位置。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前，远离页面边缘的一端是后。
元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
2）闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。
给父级清楚浮动方法：
子级元素浮动起来后，不再默认继承父级的宽高，而父级也检测不到子级的内容。
解决这个问题的方法就是给父级清除浮动。
（1）给父级手动添加高度
（2）给父级添加overflow：hidden。
注释：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）
原文: http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html © w3cplus.com
（3）给浮动的元素添加一个同级的标签，在标签内写clear：both；
（4）给父级添加一个after的伪类，在父级：after内写{
content:".";
visibility:hidden;
display:block;
clear:both;}
闭合浮动：通过给浮动元素外层的wrap添加伪元素（如after）并设置
- clear: both;
- content: ".";/content:"";直接设置成空字符串，可以省略visibility属性的设置
- display: block;
- height: 0;
- visibility: hidden;
- *zoom:1;(解决Windows IE的haslayout私有属性，IE6-7)http://riny.net/2013/haslayout/
-
-
It's called the star property hack (aka the Holly Hack) and is similar to the underscore hack.
It's used to set a property for the IE (v5-v7) family only.
等属性。此时wrap的高度不会塌陷。
2.使用overflow。给包含浮动元素的父标签添加css属性overflow:auto(overflow:hidden);zoom:1。zoom:1用于兼容IE6。
原理："overflow"的值不是"visible"可以触发Block Formatting Context （BFC，块格式化上下文）参见 http://lllt.iteye.com/blog/144053
触发BFC的条件：
触发BFC的条件：
- "float"的值不是"none"
- "overflow"的值不是"visible"
- "display"的值是"table-cell"，"table-caption",或"inline-block"
- "position"的值既不是"static"也不是"relative"