浮动

float：left | right | none；�(设计之初是用于文字环绕)

设置float属性：

（1）浮动的元素会脱离文档流，往设置的方向进行浮动，知道遇到父级的边界或者其他的浮动元素就会停止；

（2）浮动的元素撑不开父级的高度

解决浮动产生的负面影响：

（1）给浮动元素的父级设置高度；

（2）clear：left | right | both； 

        伪元素  .clear::before{                   或者                 .clear::after{

                            content: "";                                                content: "";

                            display: block;                                          display: block;

                            clear: both;                                               clear: both; 

                      }                                                                }

或者

.clearfix{

        /*兼容IE6/7*/

        zoom:1;

}

.clearfix::after{

       content:"";

       display: block;

       height:0;

       clear: both;

}

（3）给父级设置overflow：hidden；

float属性对块级元素的影响：设置浮动之后，块级的宽度不在跟随父级宽度，而是由内容撑开。

float属性对行级元素的影响：可以设置尺寸以及盒模型。

常见布局：

1、用html css 实现两列布局，一列宽度固定，另一列跟随浏览器的宽度适应，两列之间间距10px。

2.(圣杯布局  http://www.jianshu.com/p/f9bcddb0e8b4)用html css 实现三列布局，两端固定，中间跟随浏览器的宽度自适应，三列之间间距10px。

3，用html css 实现两列布局，要求两列高度自适应。