浮动、定位

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

文档流：将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
脱离文档流方式：1、定位属性positon；2、浮动属性float。

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

四种定位方式：普通流，相对定位、绝对定位和fixed。

• 普通流：元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
• 相对定位（relative ）：生成相对定位的元素，相对于元素自己的本身的位置。使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。
• 绝对定位（absolute）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。绝对定位使元素的位置与文档流无关，因此不占据空间。
• fixed定位方式：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

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

1、absolute：相对于static定位以外的第一个祖先元素（offset parent）进行定位。相对于其父元素或者祖父元素，设置了Position属性，并且属性值为 absolute 或 relative的时候，那么子元素相对于父元素来进行定位。

Paste_Image.png

2、relative：相对于元素自己的本身的位置。

Paste_Image.png

3、fixed：按照浏览器的窗口进行定位。与页面无关，即滚动页面其不会随之移动，而是固定在窗口的指定位置上；

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

z-index 属性作用是控制标签的层级关系的，最底层的数值最小，最顶层的数值最大。定义CSS中有position属性值为absolute、relative或fixed时，z-index取值方可生效。

• 相同z-index
• 如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
• 如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素。
• 父子关系：
• 如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方。
• 如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效。
• 兄弟之间子元素
  • 如果兄弟元素的z-index生效，那么其子元素覆盖关系有父元素决定。

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

负边距会使由文档流控制的元素在文档流中的位置发生偏移。通过相对定位偏移，仍然会占据它原来占据的空间，不会让文档流的其它元素进入。而通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。1

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

1.使用绝对定位。

• position：absolution；top:0;left:0;right:0;bottom:0;margin:auto;父级设置要设置成positive：relative。
• position：absolution；top:50%,left:50%
  margin-left、margin-top、 各取其宽高的负一半。

2、父容器设置display:table-cell;vertical-align:middle; text-align: center;该元素若为块元素需display: inline-block转化为行内块级元素实现居中。

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

浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。

• 对浮动元素：如果一个浮动元素已经在那个位置了，另一个元素向他那边浮动，后置的浮动元素将紧挨着前一个浮动元素边界放置。 如果一个浮动元素顶端在之前浮动元素底端下面，它可以一直浮动到父元素左（右）内边界。

Paste_Image.png

• 遇见文字时，文字会环绕在浮动元素周围。

• 行内框与浮动元素重叠时，其边框、背景、内容都在该浮动元素上显示。

• 块框与浮动元素重叠时，边框和背景都在浮动元素之下显示，而内容在之上显示。

  
  
  
  
    
  
    
       
        
  我是段落我是段落段落我落我是段落我是段落落 我是段落我是我是段落我是段落
   落我是段落我是段落我是段落我是段我是段落是段落我是段落我是段落我是段落我是段落，我是
  段落我是段落我是段落我是段落是段落， 我是段落我是段落我是段落我是段落我是段落 我
  是段落我是段落落我是段落我是段落
  
    
  我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二段我是第二，
  段我是第二段我是第二段我是第二段我是第二段
   
  我是我是标题我是标题我是标题标题
   
   
  

结果如下：

Paste_Image.png

八、清除浮动指什么? 如何清除浮动?

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

，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。或在内容的末尾增加空标签

   
 
    
 

    

   I'm a son container .
 

    
I'm the other son container .
 
    
 
   
 

2、overflow属性
给浮动元素的父容器添加overflow:hidden或overflow：auto 可以清除浮动。
3、:after、：before伪元素
after伪类申明在指定有浮动元素的末尾添加新的内容。常用的是添加一个点，利用它来清除浮动，在隐藏这个内容。

#outer:after{  
content:".";  
height:0;  
visibility:hidden;  
display:block;  
clear:both;  
 } 

本文版权归本人及饥人谷所有，转载请注明出处，谢谢！