日夜谈——浮动&定位

浮动&定位.png

今天有空，Peter我就学习了浮动&定位，了解浮动&定位的种种玄机。废话不说，go ahead！！！

1.文档流的概念指什么？有哪种方式可以让元素脱离文档流?

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

让文档脱离文档流的方法有：浮动&定位。

2.有几种定位方式，分别是如何实现定位的，使用场景如何？

CSS的定位方式由：（默认定位）static，（绝对定位） absolute，（相对定位） relative ，和（固定定位）fixed。

1.static:默认值。没有定位，元素在正常的流中,top,right,bottom,left和z-index属性无效。示例如下：
For example:

static.png

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

当元素通过设置position:relative；之后，需要通过top，right，left，bottom来控制它的位置。

当元素位置改变后，它本来默认的文档流文职仍然存在，其后面的元素依照其本来的位置进行定位。

该元素偏移之后，可能存在覆盖其他元素的情况，可以使用z-index属性显示层级有限级别。
For example:

relative1.png

z-index的使用(用之前先给元素给个定位，值大覆盖值小）：

z-index.png

3.absolute：生成绝对定位的元素，相对于static定位外的第一个父元素进行定位。
注意：

使用绝对定位时，该元素已经脱离了文档流，对于后面的元素来说，它就像不存在一样。

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

For example:

absolute.png

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

absolute2.png

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

For example:

fixed.png

就算处在一股清流中，box2的立场依然坚定不变。

3.`absolute, relative, fixed`偏移的参考点分别是什么

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

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

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.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

浮动元素的特征：

浮动元素将脱离文档流，不会再占据空间;

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

内联元素支持宽高；

设置宽高和float后，相当于悬浮的inline-block。

浮动元素对其他元素的影响：

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

对普通元素的影响，普通元素会占据浮动元素原来所在的文档位置;

对文字而言，除了自身的文字外，其他元素中的文字一律环绕浮动元素周围；
大话float

float文字围绕.png

8.清除浮动指什么? 如何清除浮动?

解释：在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

针对浮动产生的问题，清除浮动可以分为两种：

方法一：使用带clear属性的空元素
在浮动元素后使用一个空元素如

，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用

或来进行清理。

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）清理浮动。