CSS的浮动与定位

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

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)。
通过float（浮动）或position（定位）来使元素脱离文档流。将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。　　
需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。　　
而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

---

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

4 种不同类型的定位。

static：默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

relative：生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。元素不会脱离文档流，其偏移的参考点为自身原本所在的位置。

fixed：固定定位，元素框的表现类似于将 position 设置为 absolute。其参考点为浏览器。

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。元素将脱离文档流，参考位置为页面。

z-index 层叠： 值越大，元素就会在外层，覆盖较小值的元素。默认值为零，但如果不设置的话，后面会自动挡住前面。

img  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:1;
  }```


fixed和absolute表面上看起来没什么区别，都是固定定位，其实两者的区别就是所面对的参考系不同，举例说明：

absolute

fixed

```

随着拉动浏览器滚动条，absolute会随之上下滚动，而fixed则固定在此位置不动。

position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素。

---

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

position: relative仅仅是定位自身元素位置，不会对其他元素造成影响。

负margin则是改变了此元素的外部参考线，当有其他元素与之相邻时，会受到此参考线影响，从而受到影响。

---

4.如何让一个固定宽高的元素在页面上垂直水平居中?

定位+负margin

    
    
    


    
position

---

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

浮动最初是为了解决文字环绕的问题，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

元素浮动后，就会默认在浏览器中不占用位置。所以才会产生“覆盖”的情况。

若两个元素都设置为左浮，则会并列，因为此时都为浮动元素：

---

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

清除浮动指通过clear属性将之前浮动元素的影响消除。

清除浮动只能用于其本身，加在需要达到清除浮动效果的元素上。

取值：
1.none : 默认值。允许两边都可以有浮动对象
2.left : 不允许左边有浮动对象
3.right : 不允许右边有浮动对象
4.both : 不允许有浮动对象
eg:

    
    
    


    

        
1
        
2
    

```


![](http://upload-images.jianshu.io/upload_images/2399926-eb92178cd546fc43.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

两个都为浮动元素，所以两个区块并列在一行。此时清除浮动 ，因为 1 在 2 的左边，所以对 2 加上“ float: left"，就可以得到：
```     .box2 {
            background: yellow;
            border: 1px solid;
            float: left;
            clear: left;
        }```

![](http://upload-images.jianshu.io/upload_images/2399926-9bd47c4af595490f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
此时虽然 1 还是浮动元素，但是相对于 2 来说，被“清除浮动”，那么就是一个块级元素，所以 2 在 1 的下边。
***
**本文版权归本人和饥人谷所有，转载请注明来源**