浮动与定位
Posted 前端-通天
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浮动与定位相关的知识，希望对你有一定的参考价值。
整理下关于文档流，浮动，定位及造成的影响文档流的知识点
一 文档流的概念指什么？
文档流，是指元素排版布局过程中，元素会自动从左到右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
标准流的特点：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
以上是关于浮动与定位的主要内容，如果未能解决你的问题，请参考以下文章