浮动与定位

 

整理下关于文档流，浮动，定位及造成的影响文档流的知识点

一  文档流的概念指什么？

　　文档流，是指元素排版布局过程中，元素会自动从左到右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。

　　标准流的特点：1.块级元素从上到下，独占一行

　　　　　　　　　2.行内元素，行内块级元素从左到右在一行中显示。

　　　　　　　　　3.占位置。

　　使元素脱离文档流的方法有：浮动和定位。

二  CSS定位 position

      CSS定位方式有四种：默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）

      static: 默认值。没有定位，元素在正常的文档流中，top，right，bottom，left和z-index属性无效。

 

　  relative: 生成相对定位的元素，通过top，bottom，left，right的位置相对于其正常位置进行定位。其中的相对指的是相对于元素在默认流中的位置。

　　注意：1.元素偏移之后，他本来默认文档流中占据的位置仍然存在，其紧挨其后的元素的定位依据它本来的位置定位；

　　　　　2.该元素偏移之后，可能存在覆盖其他元素的情况，可以使用z-index属性改变层叠情况。

 

第二个盒子元素相对于之前的位置向下平移了20px，向右平移30px。第三个盒子的位置相对于第二个盒子原本的位置排列。

z-index需要配合position属性才能有效，值大者处于顶层，默认值为0。

 

　　absolute: 生成绝对定位的元素，相对于static定位的第一个父元素进行定位。

      注意: 1.绝对定位的元素已经脱离文档流，普通流中其他元素的布局就像绝对元素不存在一样；

　　　　 2.绝对定位的元素的位置是相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，它的位置就相对于body；

　　　　 3.绝对定位的框可以覆盖页面的其他元素。

这种情况是离box2最近的父元素已定位的情况，如果离box2最近的父元素没有定位的话，示例如下：

      

　　fixed:本质上是一种绝对定位，不为元素预留空间。通过制定相对于屏幕视窗的位置来制定元素的空间，且元素的位置在屏幕滚动时不会发生变化。应用于很多网站顶端的固定导航、下方的广告，或者右边的回到顶部div。

  

 

 

三、absolute、relative、fixed偏移的参考点分别是什么？

         absolute偏移的参考点是：相对于最近的已定位的父元素，如果没有，则相对于body元素；

　　  relative偏移的参考点是：相对于元素在普通流中的原来位置；

　　  fixed偏移的参考点是：相对于浏览器窗口。

 

四、z-index 有什么作用? 如何使用?

 

z-index属性用于设置节点的堆叠顺序，拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面。

 使用方法：示例

1.z-index仅对定位元素有效（position:relative||absolute||fixed）;

2.z-index只可比较同级元素。

五、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？

position:relative和负margin都可以使元素位置发生偏移，（都不会脱离文档流）二者的区别表现在：

          1.负margin会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间；

          2.相对定位后元素位置发生偏移，它仍会坚守原来占据的空间，不会让文档流的其他元素流入。

 、

六、浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

　　　浮动元素的特征有：

　　　　　1.块元素优先在一排显示；

　　　　　2.内联元素支持宽高；

　　　　   3.无论是块元素还是内联元素，没有宽度时默认内容撑开宽度；

　　　　   4.脱离文档流；

　　　　　5.提升层级半级（z-index）

　　　造成的影响：

　　　　　对其他浮动元素的影响：后浮动的元素永不会超过先浮动元素的顶端。

　　　　　浮动的元素只会覆盖后面的块级元素，不影响前边的块级元素。

　　　　　对普通元素的影响：浮动元素会脱离正常的文档流，使得紧挨它的元素位置发生偏移，影响布局。

　　　　　对文字的影响：浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。

                

 七、清除浮动的方法

　　如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于将来父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。clear:both

　　1.使用额外标签法：

　　在浮动的盒子之下再放一个标签，在这个标签中使用clear:both,来清除浮动对页面的影响。

　　.clearfix {clear:both;}

　　<div class="clearfix"></div>

　　a.内部标签：会将这个浮动盒子的父盒子高度重新撑开

　　b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开盒子。

　　注意：一般情况下不会使用这一种方式来清除浮动。因为这个清除浮动的方式会增加页面的标签。

　　2.使用overflow属性来清除浮动：

　　先找到浮动盒子的父元素，再在父元素中添加一个属性，就是清除这个父元素中的子元素浮动对页面的影响。

　　overflow：hidden；

　　3.使用伪元素(给父元素)来清除浮动：

　　.clearfix::after {
　　　　       content: "";//添加内容为空

                    height: 0;//内容高度为0

                    line-height: 0;//内容文本的高度为0

                    display: block;//将文本设置为块级元素

                    clear: both;//清除浮动

                    visibility: hidden;//将元素隐藏

           }

           .clearfix {

                    zoom: 1;/*为了兼容ie6*/

           }

 

参考作者（betterwlf）    http://www.cnblogs.com/wlf1112/p/6245502.html

参考作者 （Thinkguo） http://www.cnblogs.com/thinkguo/p/6223530.html#top