总结之浮动（页面3大布局之一）

    好了，一周2篇文章。本周第一篇。

前端页面重要的是好看，不好看的页面都是耍流氓。
前端页面的布局有3个。普通文档流布局，浮动布局和定位布局。
1 普通文档流布局

          既是页面元素按照其本身的特性进行纵向铺展。
           1每一个块元素独占一行（width：100%），     
           22个块级元素不能在一行；
           3页面布局的基础；
           4前面的元素消失后（不占位置：display为none不是  visibility: hidden;隐藏后还占着位置）后续元素自动填补位置。
           这算是一个动画特效。 
           5在页面框架布局中最常用和基础的。

如下图：

隐藏黑色div后，蓝色div自动填补上去。
如下图：

2 浮动布局

       浮动布局是通过给元素添加float属性实现的。
           1 float属性。必须！
                   float：left/right/inherit/none;
           2  浮动元素的特性，一个挨着一个，就想行内元素
           一样，不管元素是什么样的（行内块还是块和行内元素）。
    像普通文档流一样占个位置，使得父元素被其撑开。
    就是普通文档内容会环绕它比如文字和图片。
           4清除浮动。有浮动就一定有清除浮动。
               常见的清除浮动方式：
                  1 在最后一个浮动元素后面添加<br clear='all'/>；
                  2 在最后一个浮动元素添加如下代码：
.after:after{
clear: both;
content: '';
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
overflow: hidden;
 }
        使用：after伪元素，使得元素的后面不能有浮动元素。
          5浮动元素能撑起浮动元素，也就是说只要父元素没有
          撑起来，当然普通文档流元素也能撑起来。

如下图：

浮动的应用场景：
当父元素没有特别指定宽高时，或者父元素的大小需要内容撑起来时，用浮动比较好，因为浮动的元素会最大可能的使父元素的大小跟子元素占的大小一样。而指定了大小的父元素，其子元素应该用定位比较好。因为当父元素大小确定时，子元素的位置就相对与父元素的位置也确定了，它只会跟着父元素走，而与其他元素无关。具体细节后面再讲。
3 特殊定位布局：
特殊定位：
position:relative/static/absolute/fixed/inherit;
最牛也是最难的布局方式。用好了，就没问题，没用好就没用好！
成也萧何败也萧何！