浮动，定位

文档流的概念是什么？有那种方式可以让元素脱离文档流？

文档流指的是浏览器在渲染页面时，是根据元素在HTML文档中的位置顺序决定排布过程，行内元素从左向右，块级元素从上向下排列。
脱离文档流的两种方式：

• 浮动float，float:left|right;left左浮动，right右浮动。
• 定位position，position:absolute|fixed;

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

使用position属性，有四种不同类型的定位。

• static:元素框正常生成，按照文档流默认的显示位置定位，无法通过top,bottom,right,left值定位，z-index值无效。
• relative:相对定位，不脱离文档流相对于自身原始位置进行定位。可以通过top,bottom,roght,left的值进行定位，z-index可以控制元素的优先级。

relative

• absolute：绝对定位，脱离文档流，相对于父容器父父容器或者Body定位。

absolute

• fixed:相对于浏览器的窗口进行定位，脱离文档流，多用于广告浮窗等。

fixed

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

• fixed是根据窗口本身进行定位；
• relative是根据自己原来的位置进行定位；
• absolute是根据加了relative的父元素后者body定位；

z-index有什么作用？如何使用？

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

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

• position:relative作用于一个元素进行位置偏移，而不会影响其他元素。
• 负margin是调整外边距会影响到周围元素的布局和位置。

如何让一个固定宽高的元素在页面上垂直水平剧中？

利用绝对定位进行水平居中。上下各50%，子元素左上角根据父容器定位。然后用-margin的一半。

居中

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

浮动元素脱离了文档流。

• 对其他浮动元素，其他浮动元素会紧随在浮动元素之后浮动。
• 对于普通元素:浮动元素脱离了文档流,其他的块级元素会填充浮动元素的位置,好像根本就没有浮动元素一样.但是块元素会在浮动元素的下面,行内元素和块元素中的行内内容会考虑浮动元素的边界,因此会围绕着浮动元素。
• 对于文字:文字可以看成是块元素行内部分,他们会围绕着浮动元素。

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

父容器无法包裹浮动元素，并且浮动元素对文字排版产生影响 。
在父容器上面添加以下内容，清除浮动,任何地方有浮动元素在其父容器一定要添加clearfix，防患于未然。

.clearfix:after{
      content:'';
      display:block;
      clear:both; 
                 }