浮动
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3>box3</div>
------------------------
<style>
div{
width:22px;
height:22px;}
.box1{background:green:
float: left; #浮动在左边
float：right} #浮动在右边
.box2{bcakground:red
float:left;} #左浮动碰到浮动元素停止，并列一行（类似内联块元素~）
.box3{bcakground：yellow:} #box3这个文字不能重叠与浮动元素，围绕与yellow的背景
<style>
布局
静态布局：窗口缩小后，有滚动条。
清除浮动
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3>3</div>
------------------------------------
div{
width：20px;
height:22px
float:left;}
.box1{background:red}
.box2{background:blue;clear:both} #清除浮动，清除后会自动换行
.box3{background:pink}
解决父类边框无法撑开浮动元素
在父集加入
第一方法 .父集：after{content:"";displat:table;clear:both;}
第二方法 .父集{overflow：hidden}
定位
realative:相对定位，以元素本身位置进行偏移，不会脱离文档流，文档流位置还是在本身位置，显示位置变了。
<div class="box1">1</div>
--------------
.box1{width:20px;height:22px;background:red;
positon:relative；
left：100px；
---------------
absolute，以有定位属性的父级为参考点进行偏移，如果父爷级都没有定位属性就body为参考点。脱离文档流，不占文档位置（结果与box1重合）
.box2{width:20px;height:22px;background:blue;
positon:absolute；
left：100px；
top：22px；}
绑定定位
<div class="box1">1</div>
-------------------------
.box1{width:20px;height:22px;background:blue;
positon:fixed；
bottom：20px；
right：20px；} 用于固定导航位置，以浏览器窗口为参考进行定位。