CSS的浮动、定位、布局

浮动

　　<div class="box1">box1</div>

　　<div class="box2">box2</div>

　　<div class="box3>box3</div>

------------------------

<style>

　　div{

　　　　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{20px;height:22px;background:red;

　　positon:relative；

　　left：100px；

---------------

absolute，以有定位属性的父级为参考点进行偏移，如果父爷级都没有定位属性就body为参考点。脱离文档流，不占文档位置（结果与box1重合）

.box2{20px;height:22px;background:blue;

　　positon:absolute；

　　left：100px；

　　top：22px；}  

绑定定位

<div class="box1">1</div>

-------------------------

.box1{20px;height:22px;background:blue;

　　positon:fixed；

　　bottom：20px；

　　right：20px；}　　用于固定导航位置，以浏览器窗口为参考进行定位。