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

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

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

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

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

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

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

8、代码

答案

1、

浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.
对父容器的影响：如果父容器的子元素都是浮动元素，那么父容器会失去高度，在浮动元素之外。视觉上，父容器没有包含住浮动的子元素。
其它浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
普通元素的影响：普通元素会视浮动元素不见，占据浮动元素原有的位置，但会被浮动元素遮罩。
对文字的影响：文字会感知到浮动元素的存在，会留出空间，形成环绕效果。

2、

清除浮动是指结合clear属性让父元素在视觉上包围浮动元素。清除浮动的方法：
（1） 在父元素的子元素最后添加一个空div，并对其设置样式：clear:both;
由于在子元素最后添加了空div，并清除了浮动，因此父容器被撑开。

<div style="border: solid 5px #0e0; width:300px;">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
      <div style="clear:both;"></div>
  </div>/

（2）利用BFC来清除浮动。
因为BFC可以包含浮动，因此可以让父元素生成一个新的BFC从而包围浮动的子元素。
可以对父元素设定以下样式之一生成新BFC。
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;

<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
    <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
    </div>
</div>

(3)结合CSS特性的通用清除浮动方案，其本质还是第1种方法。

/*方法1*/
  .clearfix{
      *zoom:1;
  }
  .clearfix:after{
      content:"";
      display:block;
      clear:left;
  }

/*方法2*/
  .clearfix{
    *zoom:1;
  }
  .clearfix:after{
    content:"";
      display:table;
      clear:both;
  }

3、

有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
（1）inherit
规定应该从父元素继承 position 属性的值
（2）static
默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
（3）relative
生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px
（4）absolute
生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top,right 以及 bottom 属性进行规定
（5）fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right
以及 bottom 属性进行规定
（6）sticky
CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置

CSS有三种基本的定位机制：普通流，相对定位和绝对定位
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式
相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变

绝对定位与固定定位相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样

绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位

因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index
fixed固定定位是属于绝对定位中的一种。一般使用场景，例如：导航栏，右侧工具栏，底部回到顶部按钮等。它的定位是相对于浏览器的视窗口（viewport）来定的，而其他的绝对定位则是相遇于文档（html）定位的。

4、

z-index 属性指定一个元素的堆叠顺序。因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index有三个属性
auto 默认。堆叠顺序与父元素相等。
number设置元素的堆叠顺序。
inherit规定应该从父元素继承 z-index 属性的值。

5、

position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
margin：除了让元素自身发生偏移还影响其它普通流中的元素。

6、

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则:
内部的Box会在垂直方向，一个接一个地放置;
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此;
BFC的区域不会与float box重叠;
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此;
计算BFC的高度时，浮动元素也参与计算;

哪些元素会生成BFC?:
根元素;
float: left|right;
overflow: hidden|auto|scroll;
display: table-cell|table-caption|inline-block;
position: absolute|fixed;
BFC的作用有：
（1） 解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
（2） 清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。

7、

外边距合并指的是，当两个垂直外边距相遇时，即当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
父子外边距合并的条件是父元素没有边框和padding隔开。形成BFC 可以阻止外边柜合并，如上一题的给元素添加浮动，绝对定位，inline-block,父子元素情况下，给父元素添加overflow不为none也可以阻止。

#d1 {
  width:100px;
  height:100px;
  margin-bottom:20px;
}
#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
}

<div id="d1">
</div>

<div id="d2">
</div>

这时两个div在垂直距离上的外边距进行了合并，合并后的值是20px。
如果不想这样，就在上一个元素里加一个：
display:inline-block;
阻止外边距合并

为了阻止父子元素合并，父元素生成一个新的BFC, overflow, display...
给父元素加上一个边框或者padding等..

8、

代码1实现alert效果
代码2实现表单效果
代码3实现模态框效果
代码4实现导航栏效果