第七章 浮动与定位

1、元素的浮动属性float：指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中相应的位置的过程。

     属性值：left     right     none

    （如设置左浮动的box1漂浮到box2的左侧，也就是说box1不再受文档流控制，出现在一个新的层次上。）

2、由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素的排版产生影响。如果要避免这种影响，就需要对元素清除浮动。

     clear ：避免左右浮动对元素的影响。

     overflow  ：对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响。没有设置高度的父元素变成了一条直线，父元素不能自适应子元素的高度。应以父元素为设置对象，应用“overflow:hidden;”样式。

      after ： 伪对象。必须为需要浮动的元素伪对象设置“height:0;”样式，否则该元素会比其实际高度高出若干像素。在伪对象中设置content属性，属性可以为空，“content:0;”  如（.father:after{ display:block;    clear:both;  content:"";  height:0;  visibility:hidden;  }）

3、overflow属性：选择器｛overflow:属性值；｝

     visible：内容不会被修剪，会呈现在元素框之外（默认值）

    hidden：溢出内容会被修剪，并且被修剪的内容是不可见的。

    auto：在需要时产生滚动条，即自适应所要显示的内容。

   scroll：溢出内容会被修剪，且浏览器会始终显示滚动条。

4、元素的定位属性

     （1）、定位模式 position

      static：自动定位（默认定位方式）

      relative：相对定位，相对于其原文档的位置进行定位。

      absolute：绝对定位，相对于其上一个已经定位的父元素进行定位。

      fixed：固定定位，相对于浏览器窗口进行定位。 

     （2）、边偏移

      top         bottom     left           right

5、静态定位：就是各个元素在HTML文档流中默认的位置。无法通过偏移属性来改变元素的位置。

6、相对定位：将元素相对于它在标准文档流中的位置进行定位，它在文档流中的位置仍然保留。

7、绝对定位：是将元素依据最近的已经定位（绝对，固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。

8、注：（1）如果仅设置绝对定位，不设置边偏移量，则元素的位置不变，但其不再占用标准文档流中的空间，与上移的后续元素重叠。

              （2）定义多个边偏移属性时，如果left和right 冲突，以left为准，top和bottom冲突，以top为准。

9、固定定位：以浏览器窗口作为参照物来定义网页元素。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

10、z-index的默认属性为0，取值越大，定位元素在层叠元素约居上。仅对定位元素有效。