1.float

float:left | right | none | inherit 默认：none
。默认宽度为内容宽度
。脱离文档流
。向指定方向一直移动

图 float的元素在同一文档流

Screenshot_2017-02-17-09-58-58.png

图 float元素半脱离文档流：对元素，脱离文档流；对内容，在文档流

Screenshot_2017-02-17-10-01-18.png

2.clear

。clear: both | left | right | none | inherit
。应用于后续元素
。应用于块级元素

clearfix 清除浮动

.clearfix:after{
            content:'.';
            display:block;
            clear:both;
            height:0;
            overflow:hidden;
            visibility:hidden;
            }```

###3.布局：两列布局

//html
<div class="body clearfix">
<div class="side">side</div>
<div class="main">main</div>
</div>```

//css
.side{float:right;width:200px;}
.main{float:left;width:500px;}
.clearfix:after{content:'.';display:block;clear; both;height: 0;overflow: hidden;visibility: hidden;}```