css布局的三种方式
1、默认文档流方式
以默认的html元素的结构顺序显示
2、浮动布局方式
通过设置html元素的float属性显示
3、定位布局方式
通过设置html元素的position属性显示
对象浮动后，它就脱离了当前的文档流，可以理解为飘起来了，它原来的地方就空出来了
它后面的内容就会占用它原来的地方
浮动是CSS实现布局的一种方式
none:不浮动
left:对象向左浮动，而后面的内容流向对象的右侧
right:对象向右浮动，而后面的内容流向对象的左侧
浮动是将块元素的霸道属性-独占一行的行为取消，允许其他元素与它一行
浮动其实是这个块从原来的文档流模式中分离出来，它后面的对象就视它不存在
常用的布局效果：一行并列式，就是在一行中并列显示多个块元素
IE6中，子元素的高度超过了父元素的高度，默认会把父元素的高度自动增加
清除浮动：当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过清除浮动的方法来解决浮动元素的影响。
浮动浮动，先浮后动
浮动的对象，会先漂浮起来，离开原来的位置。后动，就是它后面的对象会向它原来的位置上移动
css中存在三种定位机制
标准文档流、浮动和绝对定位
标准文档流：从上到下，从左到右输出文档内容，由块级元素和行级元素构成
常见块级元素：div,li,ul,dl,dt,p
常见行级元素：input,img,span,strong
块级元素和行级元素都是盒子模型
盒子模型四个组成部分：border,margin,padding,content
相对定位特点
1、相对于自身原有位置进行偏移；
2、仍处于标准文档流中；
3、随即拥有偏移属性和z-index属性；
绝对定位特点
1、建立了以包含块为基准的定位；
2、完全脱离了文档流；
3、随即拥有偏移属性和z-index属性；
当一个元素设置了绝对定位，没有设置宽度的时候，会根据内容来调节宽度。
绝对定位设置偏移量，偏移参照标准：
没有已经定位的祖先元素，以html标签为偏移参照标准；
有已经定位的祖先元素，以距离其最近的祖先元素为参照标准进行绝对定位偏移。
绝对定位没有设置偏移量的话：无论是否存在已经定位的祖先元素，都会保持在元素初始位置，并且会脱离文档流
左列定宽，右列自适应
<div id="wraper">
<div id="left">left</div>
<div id="right">right</div>
</div>
#wraper{width: 80%;margin:0 auto;background-color: #ccc;height: 500px;}
#left{float: left;width: 200px;background-color: red;height: 500px;}
#right{margin-left:210px;background-color: blue;height: 500px;}绝对定位
<span class="absolute"></span>
<div></div>
div{background: red;width: 250px;height: 100px;}
/*
元素设置成absolute后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素，都会生成一个块级框，
也就是例如行内元素span设置了absolute后就可以设置height和width属性了。
span标签被设置成绝对定位，就可以设置height和width属性，而且不占有原本的空间，后面的div元素会顶替上去。
*/
.absolute{position: absolute;width: 200px;height: 80px;background: #ccc;}<body style="border: 1px solid #f00;">
<!--
一个元素被设置为绝对定位时，会脱离文档流，然后相对其包含块进行偏移。
一般来说，我们会将一个元素设置为relative来作为absolute元素的包含块。
有两个绝对定位元素，第一个元素没有position不是static的祖先元素，所以它的包含块是body，根据body进行偏移，
第二个绝对定位元素设置了一个relative的父元素，它根据父元素进行偏移。
-->
<div class="absolute">
相对于初始包含块定位
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="relative">
<div class="absolute">
相对于最近relative祖先元素定位
</div>
</div>
</body>
div { background: #0094ff; width: 250px; height: 100px; }
.relative { background: #f00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }
.absolute { background: #00f; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }
相对定位
<!--
relative定位的元素进行偏移后，不会脱离文档流，还会占据原本的空间。除此之外，我们还要注意一个细节：如果元素设置了margin为负值之后发生重叠的情况下，相对定位的元素会覆盖普通元素。
relative属性最经常的一个应用应该是作为absolute元素的包含块了，为了限制absolute元素的偏移位置，常常设置其父元素为relative来作为其包含块。
-->
<div class="no-relative">
<!-- 添加了相对定位后，即将no-relative改为relative。第一个元素就会覆盖其他正常的元素了。 -->
未相对定位的元素
</div>
<div class="minus-margin">
负margin元素
</div>div { background: #0094ff; width: 250px; height: 100px; }
.no-relative { background: #ff6a00; width: 200px; height: 100px; }
.relative { background: #ff6a00; width: 200px; height: 100px; position: relative; }
.minus-margin { margin-top: -30px; }
fixed的表现方式类似于absolute，但是相比于absolute相对于不确定的父元素进行偏移，fixed就是相对于浏览器窗口进行偏移
包含块
在详解CSS float属性中我们提到包含块这个概念。对于position属性也有包含块这个属性，它要分几种情况来讨论：
1.根元素的包含块，根元素一般是html元素，有些浏览器会使用body作为根元素，大多数浏览器，初始包含块是一个视窗大小的矩形
2.非根元素的包含块，如果该元素的position是relative或static，它的包含块是最近的块级框，表的单元格或行内块的内容边界
这是相对定位元素的包含块，为最近的块级框，表的单元格或行内块的内容边界，相对定位元素相对于其包含块进行偏移，我们可以简单理解为相对于其原来的位置进行偏移。
3.非根元素的包含块，如果该元素的position是absolute，则包含块为最近的position不是static的祖先元素。
简单来说，它的包含块会从父级元素一直向上查找，找到第一个position不是static的元素为止。
偏移属性
前面的例子中已经涉及到偏移属性，它指的是元素相对于其包含块的偏移，我们称其为偏移属性，分别是top，bottom，left，right，依次代表上下左右。他们的值可以是具体的数值，也可以是百分比。如果是百分比，top和bottom是相对于包含块高度的百分比，left和right是相对于宽度的百分比。它们也可以设置负值，即有可能将元素移动到包含块的外边。
<div>
我是父级元素
<div class="relative">
我是相对定位元素
</div>
</div>
div{background: #0094ff;width: 250px;height: 100px;}
.relative{position: relative;background: #ff6a00;width: 200px;height: 100px;top: 10px;left: 20px;}
