css第四天---浮动

1css布局的三种机制

    1.1标准流（最稳定）

         块级--->自上而下

         行内--->自左到右

    1.2浮动

         浮动可以让多个块级元素子在一行无缝隙显示，布局最为长常用

    1.3定位

2浮动

     2.1目的：让多个块级元素在一行显示

         浮动只要左右，没有居中

         我们的浮动元素只能一行显示（除非装不开盒子，才会下来）

     2.2口诀

          浮：漂浮在标准流上面，就是脱标

          漏：浮动的盒子不占有位置

          特：浮动的元素能改变display的属性。类似行内快

     2.3一有全有

         父盒子里面的孩子，只要有一个浮动，其余的都得浮动才行

3清除浮动

     1.目的

           因为父亲很多情况下不方便给高度，所以为了解决父亲高度为零的问题

     2方法

          额外标签法 ：给最后一个浮动的标签添加一个新标签

          overflow：hidden

          单伪元素：.clearfix:after { content: "", display: block; height: 0; visibility: hidden;  clear:both;}

          双伪元素：.clearfix:before,.clearfix:after { content:"", display: table}  .clearfix:after { clear:both;}

                    ps：ie6/7兼容

4.ps 切图 

       ps自带的ps切片切图

       ps插件cutterman