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

• 浮动的元素会脱离文档流.向左或者向右移动至包含块内边缘或者同样浮动的元素外边缘.文档流中的普通元素察觉不到浮动元素,但是其文本内容却能察觉到浮动元素,呈现出围绕浮动元素排列的表现方式.
• 对父容器的影响:子元素都浮动会使父元素失去高度.
• 对其它浮动元素的影响:如果父元素的宽度不够,其它的浮动元素会向下移动,如果浮动元素的高度不同,向下移动的元素会被卡住.
• 对普通元素的影响:普通元素察觉不到浮动元素,占据浮动元素原有的位置,会被浮动元素遮住.
• 对文字的影响:文字可以感知到浮动元素的存在,为其留出空间,形成环绕效果.

清除浮动指什么? 如何清除浮动? 两种以上方法

• 清除浮动是指消除浮动元素造成的父元素高度塌陷的问题.
• 清除浮动的方法:
  1. 为父元素设置高度
  2. 在父元素最后添加一个空div,设置样式clear: both
  3. 利用css清除浮动,本质上还是方法2
  .clearfix {*zoom: 1;}
  .clearfix:after {content:"";display: block;clear: both;}
  4. 利用BFC清除浮动,因为BFC可以包含浮动,隐藏可以让父元素生成一个新的BFC来保卫浮动的子元素.
  对父元素设置下列样式生成BFC
  float: left | right
  overflow: hidden | auto | scroll
  display: table-cell | table-caption | inline-block
  position: absolute | fixed

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

• inherit：继承父元素定位属性。
• static：默认值，没有定位，元素出现在正常的文档流中。参考点是文档流中的位置。
• relative：相对定位。相对于元素本身正常位置进行定位，通过top、bottom、left、right属性来设置偏移量。使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整。
• absolute：绝对定位。相对于static定位以外的第一个祖先元素进行定位，若都没有发现则以html标签为参考进行定位。使用场景：当想让元素参照特定参照物进行定位时使用。
• fixed：固定定位。生成绝对定位元素，相对于viewport进行定位。
• sticky：对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。兼容性不佳，不常用。

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

• z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index 仅能在定位元素上奏效。
• 当页面上出现多个由绝对定位（position:absolute）或固定定位（position:fixed）所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置z-index的值来解决，这个值较大的就在上面，较小的在下面。

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

• position:relative是相对于自身在文档流的位置发生偏移，原本所占有的位置不会被其他元素占据，外形发生了移动但本身的位置是不动的；
• 负margin则文档流的位置会发生偏移，会让后面的元素也发生位置的偏移。

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

• BFC就是所谓的Block formatting contexts （块级格式化上下文）。创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC仍然属于文档中的普通流。
• 触发BFC:
  1.float 除了none以外的值
  2.overflow 除了visible 以外的值（hidden，auto，scroll ）
  3.display (table-cell，table-caption，inline-block)
  4.position（absolute，fixed）
  5.fieldset元素
• 清除浮动，让父容器生成新的BFC可以使父容器在视觉上包围了浮动的子元素，因而清除了浮动。例子
• 防止margin重叠：属于同一个BFC的两个相邻Box的margin会发生重叠，我们可以把其中一个元素生成新的BFC，这样它们的边距就不会合并。例子见下题.

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

• 兄弟元素外边距合并指当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当两个外边距都为负数时，取其绝对值的较大者，当两个外边距为一正一负时，取两者的和。
• 父子元素外边距合并是指给子元素设置的上边距与父元素的上边距发生合并,子元素的上边距消失,父元素的上边距取其最大值.
• 防止让相邻元素外边距合并的方法：只有普通文档流中块框的垂直外边距才会发生外边距合并,使其中一个元素脱离标准流(浮动/绝对定位)即可以消除外边距合并.
• 防止父子外边距合并的方法：
  1.外层padding；
  2.透明边框border:1pxsolidtransparent;
  3.绝对定位postion:absolute:
  4.外层DIV overflow:hidden;
  5.内层DIV　加display:inline-block(3,4,5为触发BFC);
• 外层盒子触发BFC的案例demo