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默认会把父元素的高度自动增加