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

浮动元素：元素脱离正常的文档流，其他非浮动元素感知不到它的存在。但是浮动元素可以感知已经存在于文本框中的浮动元素和非浮动块级元素。可以移动到所在容器的的左端或者右端。其他的文本和行内元素围绕它安放。

特征：不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列

对父容器的影响： 不与父容器发生外边距合并。无法撑开父元素。

对其他浮动元素的影响：父容器足够宽，与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。

对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。

对文字的影响：文字所在行框因为浮动元素的挤压而缩短，实现了文字环绕浮动元素的效果。
推荐文章
2. 清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动指：消除浮动元素对其他元素因浮动元素造成的高度塌陷的问题
清除浮动的方法：

1. 利用 clear属性，清除浮动
   clear属性：一个元素是紧挨着前面的浮动元素，还是必须移动到它们的下面（浮动被清除）。clear属性既可以用于浮动元素，也可以用于非浮动元素。

   • 当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。

   1.非浮动块为父元素，对父元素设置伪元素after。

   container:after {

     content: "";
     display: block;
     clear: both;
   

   }

   2.非浮动块为父元素，在父元素的底部添加新的空标签，设置属性clear: both或者clear: left或者clear: right

  - 当应用于**浮动元素**时，它将操作元素的**外边界**移动到所有相关的浮动元素**外边界**的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。**clear只对元素本身的布局起作用**
    ```
    设置操作元素属性`clear: both`或者`clear: left`或者`clear: right`
    ```
2. 使父容器形成BFC
父容器成为BFC后，父容器将不会出现高度塌陷的问题。

**3. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？**
通常使用三种定位方式
-  relative  相对定位。元素不脱离文档流（即DOM结构还存在）。参考点：自身在文档流中的位置。使用场景：一般作为绝对定位的元素参考点，或者页面图片的小偏移。
-  absolute  绝对定位。元素脱离文档流。参考点：距离最近的非static祖先元素位置。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。使用场景：元素的水平垂直居中。
- fixed   固定定位。元素脱离文档流。参考点：参考浏览器窗口的位置。使用场景：相对于浏览器窗口位置始终不变的显示窗口，比如：固定边栏和底栏


**4. z-index 有什么作用? 如何使用?**
z-index 属性设置元素在Z轴方向上的堆叠顺序。数值越大，元素越靠前。可设置负的 z-index 属性值。
Z-index 仅能在定位元素（position:relative/absolute/fixed）上奏效。[使用案例](http://jsbin.com/vidifodisa/edit?html,css,output)

**5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别**
position:relative，元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素在文档流中的布局。
负margin，元素的显示位置和在文档流中的位置均发生变化，会影响后面元素在文档流中的位置。
**6.如何让一个固定宽高的元素在页面上垂直水平居中?**
可以使用绝对定位来实现。top/left偏移的百分比是相对于父容器内容的宽高。
margin-top/margin-left是相对于自身元素的宽高。[使用案例](http://jsbin.com/fesovajuxa/edit?html,css,output)

**7.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明**
**块格式化上下文（block formatting context）** 是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。具有**对内部元素的包裹性**及**对外部元素的独立性**。

生成BFC的方式：

float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed

BFC的作用：
  - 对内部元素的包裹：阻止父子元素外边距合并和包裹浮动元素
      - 阻止父子元素外边距合并。[使用案例](http://jsbin.com/sajecisavo/1/edit?html,css,output)
      - 包裹浮动元素。[使用案例](http://jsbin.com/zudulegumi/1/edit?html,css,output)
  - 对外部元素的独立性：不与浮动元素发生重叠。[使用案例](http://jsbin.com/pedewogowa/1/edit?html,css,output)

**8.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例**

外边距合并形式：
 - 相邻。[example](http://jsbin.com/zegatayema/1/edit?html,css,output)

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

- 空元素自身和上下边距合并。无border无padding无content的空元素，上下边距分别和相邻元素合并，然后自己的上下边距合并。[example](http://jsbin.com/mipihapura/edit?html,css,output)

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

- 父子。父元素中不设置padding和border时，父元素和子元素的外边距重合，只设置子元素的margin-top，父子元素整体下移，发生外边距合并。[example](http://jsbin.com/wufitamuzo/edit?html,css,output)

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

不让相邻元素外边距合并的方式：创建BFC。[使用案例](http://js.jirengu.com/dalakogubo/1/edit?html,css,output)

**9. 行框和行内框**
**行内框**在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。
由一行形成的水平框称为**行框（Line Box）**，行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

**10. inline-block和float的区别**
[推荐链接](http://www.cnblogs.com/coco1s/p/4024445.html)
##文章著作权归本人所有，转载须说明来源