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

浮动元素会脱离正常的文档流，能设置的值为float:left/right;他会向左或像右移动直到触碰到父容器的框或者其他浮动元素的框为止。（受父元素padding和自身的margin影响）

• 对父容器的影响。

假如父容器下的元素全部为浮动元素，父容器的高度将不能被撑开。

• 对其他浮动元素

其他浮动元素会感知到浮动元素的存在，同时设置向左浮动的话，其他浮动元素会依次像右排列，但是如果造成“溢出”的现象，左浮动元素如果高度一致，会再从父元素的框排列，不一致的话，较高的浮动元素卡住浮动元素。

• 对普通元素和文字的影响。

普通元素感知不到浮动元素的存在，视觉上会被浮动元素覆盖。但是文字会感受到float元素的存在，会形成文字环绕的效果。

2.清除浮动指的是什么？如何清除浮动，两种以上的方法。

• 清除浮动指的是消除浮动元素对其他元素造成的不利影响。主要解决父元素高度塌下的问题。

• 清除浮动的方法。

  1. 用clear属性。
     具体为需要清除浮动的元素加上clear:both/left/right等属性，不允许自身的左边右边有浮动元素。对于父元素来说，可以在最后加上一个空的div标签，并给div设置clear:both;这样，空的div标签不允许自身被浮动元素包围，且在正常文档流中，父元素就得包裹空的div标签，父元素高度塌陷问题就可以解决。

  2. 用BFC清楚浮动。

BFC

利用BFC重构的格式化块状元素上下文规则来达到清除浮动的目的。但是又由于要把块状元素设置为符合BFC要求的块状元素会有各种各样新的问题，所以应该结合自身需要为其设置。

• 常见的方法（副作用较小的方法）

方法一

方法二

注： *zoom 代表ie6-7的清楚浮动的方法。zoom本身的意思是缩放比例。同样是符合BFC的。

3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

目前较为常用的有三种。

• 相对定位 position:relative;
  相对自身的位置发生偏移，偏移后视觉上会覆盖之后的普通文档流，偏移前的位置仍然被占据。

• 绝对定位 absolute;
  相对于static定位意外的第一个祖先元素进行定位，若都没有发现则以html标签为参考进行定位。普通元素不会感知到absolute元素的存在，且视觉上也会被覆盖，即绝对定位不会占据普通流空间。使用场景：当想让元素参照特定参照物进行定位时使用。
  需要注意的是，如果只设置position:absolue ;left/top采用默认的auto，就是相对于第一个非static祖先元素的padding。如果设置的是0，则相对border;

• 固定定位 fixed；

固定定位,种种表现都类似于absolue；只不过定位的元素是浏览器窗口。或者说是视窗。

• 其他定位值；

  
  
  CSS定位

4.z-index 有什么作用? 如何使用?

z-index属性适用于定位元素(position属性值为 relative 或 absolute 或 fixed的对象)，用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack order)。

z-index值越大，越在最上层。且只有在相同父元素中才能比较。

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

• position:relative 不会影响其他的普通文档流的，普通文档流仍然会在偏移之前的占据的位置后面正常排列。只是视觉上有可能覆盖到普通文档流。

• 负margin 本身仍然是普通文档流中的一员，实际上位置发生偏移，会影响之后的普通文档流的排列。

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

• BFC是 Block Format Context 格式化块状上下文规则。

• 生成BFC的方法。

  • float:right/left;
  • overflow:不为visible;
  • position:absolute/fixed
  • display:inline-block,table-cell,table-capation

display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC

• BFC规则

  • 内部的Box会在垂直方向上一个接一个的放置

  • 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关，其中一个元素生成新的BFC就不会再发生重贴。）

  • 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）

  • BFC的区域不会与float的元素区域重叠

  • 计算BFC的高度时，浮动子元素也参与计算

  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。

可以解决的问题有：

1. 父元素生成BFC就可以包住浮动元素，达到清除浮动的目的，解决浮动元素父元素高度塌陷。

2. 解决外边距合并问题，同处于一个BFC规则下的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。

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

• 只有普通文档流中块框的垂直外边距才会发生外边距合并。

• 合并的情景：

上下相邻

这种情况合并以外边距大者为准，不管有没有外边框。

被包含

这种情况合并也是哪个大就体现哪个的外边距。如果父元素设置border，或者padding属性，则子元素的margin就能正常体现了。

自身合并

• 如何不让其合并。

对于第一种相邻子元素的margin，可以为第一个元素或者第二个元素加上一个新的BFC外壳，如可以为第一个元素加一个absolute的父元素。

对于第二种可以为父元素创建新的BFC，或者为父元素加上padding或者border.

对于第三种自身合并直接加content就行了。