CSS布局的三种方式：
==============================================================================
1.默认文档流方式
以默认的HTML元素的结构顺序显示
==============================================================================
2.浮动布局方式
=====浮动是将块元素的霸道属性--独占一行的行为取消，允许他人和他在一行显示
=====浮动其实是，这个块从原来的文档流模式中分离出来，它后面的对象，就视他不存在。
浮动对象对其 父元素 和 后面的元素 会产生影响。
--------当父元素没有指定高度时，并且它的子元素有浮动，这时，这个父元素的高度不会自动增加。
------------------------- 清除浮动 --------------------------------------
清除浮动----去掉前面对象浮动对后面对象的影响
clear: none; 允许两边有浮动对象
left; 不允许左边有浮动对象，对自己没有影响
right；不允许右边有浮动对象
both； 左右两侧不允许有浮动对象
**************************解决方法****************
1.额外标签法：在容器的末尾增加一个“clear：both”的元素，强迫容器适应它的高度，以便装下所有的float元素。
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div class="clear"></div> //增加一个空div
</div>
<style>
.clear{ float:both; }
</style>
2.父元素使用overflow的方法：通过设置父元素overflow值设置为hidden，是最简单的清除浮动方法，但如果子元素使用了定位布局，就会很难实现。
3.利用伪对象after方法：定义一个类，使用伪对象after,控制浮动元素的影响
清除浮动：
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:"";
}//加给父类
==============================================================================
3.定位布局方式
------通过设置HTML元素的position属性显示
position： static； //静态定位（默认值）
absolute; //绝对定位，将对象从文档流中分离出来，通过设置left，right，top，bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象
***********想使用绝对定位时，必须有两个条件：
【1】给父元素加定位属性。position:relative;
【2】给子元素加绝对定位。position:absolute;同时要加方向属性。
relative； //相对定位，对象不从文档流中分离，通过设置left，right，top，bottom四个方向相对于自身的位置进行相对定位。
*******相对定位与绝对定位***********************
绝对定位是以父元素为基准点进行定位。---会脱离文档流
相对定位是根据其自身为基准点进行定位。----离开原位置，但还占着文档流的空间
============================================================================
浏览器兼容问题
IE6----父元素中的子元素的高度超过了父元素的高度，IE6默认会把父元素的高度自动增加
