日夜谈——浮动&定位
浮动&定位.png
今天有空，Peter我就学习了浮动&定位，了解浮动&定位的种种玄机。废话不说，go ahead！！！
1.文档流的概念指什么？有哪种方式可以让元素脱离文档流?
<li>文档流（normal flow），指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。文档流也是一种定位方式之一。
<li>让文档脱离文档流的方法有：浮动&定位。
2.有几种定位方式，分别是如何实现定位的，使用场景如何？
CSS的定位方式由：（默认定位）static，（绝对定位） absolute，（相对定位） relative ，和（固定定位）fixed。
1.static:默认值。没有定位，元素在正常的流中,top,right,bottom,left和z-index属性无效。示例如下：
For example:
static.png
<b>2.relative</b>:生成相对定位的元素，通过top,bottom,left,right的位置相对于其正常位置进行定位。<b>其中的相对指的是相对于元素在默认流中的位置。</b>
注意：
<li>当元素通过设置position:relative；之后，需要通过top，right，left，bottom来控制它的位置。
<li>当元素位置改变后，它本来默认的文档流文职仍然存在，其后面的元素依照其本来的位置进行定位。
<li>该元素偏移之后，可能存在覆盖其他元素的情况，可以使用z-index属性显示层级有限级别。
For example:
relative1.png
z-index的使用(用之前先给元素给个定位，值大覆盖值小）：
z-index.png
<b>3.absolute</b>：生成绝对定位的元素，相对于static定位外的第一个父元素进行定位。
注意：
<li>使用绝对定位时，该元素已经脱离了文档流，对于后面的元素来说，它就像不存在一样。
<li>绝对定位的元素的位置是相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，它的位置就相对于body。
For example:
absolute.png
这种情况是离box2最近的父元素已定位的情况，如果离box2最近的父元素没有定位的话，示例如下：
absolute2.png
<b>fixed：</b>本质上是一种绝对定位，不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间，且元素的位置在屏幕滚动时不会发生变化。应用于很多网站顶端的固定导航、右下角的固定广告等等。
For example:
fixed.png
就算处在一股清流中，box2的立场依然坚定不变。
</br>
3.absolute, relative, fixed偏移的参考点分别是什么
<li>absolute偏移的参考点是：相对于最近的已定位的父元素，如果没有，则相对于body元素；
<li>relative偏移的参考点是：相对于元素在普通流中的原来位置；
<li>fixed偏移的参考点是：相对于浏览器窗口。
4. z-index 有什么作用? 如何使用?
z-index用于设置元素的堆叠顺序，z-index的值越高，则其堆叠顺序越前，则是显示在较低z-index的值的前面。
z-index.png
注意：
1.z-index仅对定位元素有效（position:relative||absolute||fixed）;
2.z-index只可比较同级元素
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
区别：
1.负margin会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间；
2.相对定位后元素位置发生偏移，它仍会坚守原来占据的空间，不会让文档流的其他元素流入。
正常：
static.png
设置负margin：
负margin.png
6.如何让一个固定宽高的元素在页面上垂直水平居中?
可以对固定宽高的元素设置负margin和绝对定位使其居中：
水平垂直居中.png
7.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
浮动元素的特征：
<li>浮动元素将脱离文档流，不会再占据空间;
<li>无论是块元素还是内联元素，没有宽度时默认内容撑开宽度;
<li>内联元素支持宽高；
<li>设置宽高和float后，相当于悬浮的inline-block。
浮动元素对其他元素的影响：
<li>对其他浮动元素的影响：后浮动的元素永不会超过先浮动元素;
<li>对普通元素的影响，普通元素会占据浮动元素原来所在的文档位置;
<li>对文字而言，除了自身的文字外，其他元素中的文字一律环绕浮动元素周围；
<a href="http://www.75team.com/post/%E5%A4%A7%E8%AF%9Dfloat.html">大话float</a>
float文字围绕.png
8.清除浮动指什么? 如何清除浮动?
解释：在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
针对浮动产生的问题，清除浮动可以分为两种：
方法一：使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
clearboth.png
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
方法二：使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
overflow.png
方法三：给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
方法四：使用邻接元素处理
什么都不做，给浮动元素后面的元素添加clear属性。和方法一相似，只是这个元素具有内容。
方法五：使用CSS的:after伪元素
结合 :after 伪元素和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
after伪元素.png
通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格" "，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。
推荐
在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；
9代码：
<a href="http://js.jirengu.com/fugopobaqa/1/edit?html,css,output">代码1</a>
代码一.png
<a href="https://jsbin.com/dulexumape/edit?html,css,output" >代码2</a>
代码2.png
参考资料：
<a href="http://www.cnblogs.com/ForEvErNoME/p/3383539.html">理解清除浮动及其方法</a>
<a href="http://blog.haohtml.com/archives/8125">css样式float造成的浮动“塌陷”问题的解决办法</a>
<a href="http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/">CSS float浮动的深入研究、详解及拓展(一)</a>
<a href="http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/">CSS float浮动的深入研究、详解及拓展(二)</a>
注：版权归饥人谷peter和饥人谷所有，若有转载请注明来源
感谢吃瓜子观众：
gaki10.png
