浮动定位BFC边距合并

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

• 特征：
  • 浮动元素会脱离正常的文档流，按其外边距指定的位置相对于它的上一个块元素或者父元素显示。
  • 浮动元素之后块级元素的内容向此浮动元素的外边距看齐， 但边框和背景会忽略浮动元素与上一个非浮动元素看齐。
  • 浮动元素之后的内联元素会向此浮动元素的外边距看齐。
• 对父容器造成的影响：
  • 由于浮动元素脱离了正常的文档流, 无法撑开父元素的，造成父元素的塌陷。
• 对其他元素的影响：
  1. 如果其他元素是非浮动元素。块级相邻元素，该元素会忽略该浮动元素，占据它的位置，块级元素会被浮动元素遮盖，但是块级元素的内部内容和内联元素会环绕浮动元素。内联元素相邻元素会环绕浮动元素。
  2. 如果其他元素是浮动元素。同方向的浮动元素，紧跟在前一个之后。不同方向的浮动元素，互不影响，处在同一水平线上。

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

清除浮动指的是解决父容器高度塌陷的问题。方法：

• 在父元素中，最后添加一个空的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>

• 为父元素也添加一个float: left|right属性
• 父元素添加一个属性overflow: hidden|auto|scroll

<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>

• 父元素添加 display: table-cell|table-caption|inline-block 属性
• 父元素添加 position为 absolute|fixed 属性

以上方法都有一定的局限性。改变了父元素属性，要考虑到对父元素的父元素的影响，overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式。display这几种方式依然没有解决低版本IE问题。IE6、7内有个hasLayout的概念，当元素的hasLayout属性值为true的时候会达到和BFC类似的效果。

• 通用的清理浮动方案

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

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

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

CSS有三种定位方式，普通流，浮动，绝对定位。

• 普通流是默认的定位方式，在普通流中元素框的位置由元素在html中的位置决定，是最常见的方式。其中position: static和position: relative属于普通流的定位方式。relative，可以看成特殊的普通流定位。相对于该元素在普通流的位置定位，如position:relative; top:20px; left:20px;

  <div style="border: solid 1px #0e0; width:200px; position: static;">
      <div style="height: 100px; width: 100px; background-color: Red;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Red;">
      </div>
  </div>
   <div style="border: solid 1px #0e0; width:200px;">
      <div style="height: 100px; width: 100px; background-color: Red;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green; position:relative; top:20px; left:20px;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Red;">
      </div>
  </div>

• 浮动定位，位置一般由父元素或者相邻浮动元素的位置决定。属性为float: left|right

  <div style="border: solid 1px #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: Red; float:left">
      </div>
  </div>

• 绝对定位包括absolute和fixed,绝对定位的元素的位置是相对于最近的非staitc祖先元素的位置决定的。如果元素没有已定位的祖先元素，那么它的位置就相对于初始包含块html来定位。fixed固定定位也是绝对定位的一种，固定定位的元素也不包含在普通流中，二者的差异是固定定位的包含块是viewport，一般指的是整个屏幕。绝对定位宽度是收缩的，如果想撑满父容器，可以设置 width: 100%

<div style="border: solid 1px #0e0; width:200px; position:relative;">
      <div style="height: 100px; width: 100px; background-color: Red;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green; position:absolute; top:20px; left:20px;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;">
      </div>
  </div>
    <div style="border: solid 1px #0e0; width:200px;">
      <div style="height: 100px; width: 100px; background-color: Red;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green; position:fixed; bottom:20px; left:20px;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;">
      </div>
  </div>

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

z-index属性指定一个元素及其子元素的z-order。当元素重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。

  <div style="border: solid 1px #0e0; width:200px; position:relative;">
      <div style="height: 100px; width: 100px; background-color: Red;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green; position:absolute; top:20px; left:20px;z-index:1">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;position:absolute;top:20px;z-index:2">
      </div>
  </div>

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

position:relative定位是相对于该元素在普通流的位置定位, 不会影响相邻的兄弟元素
margin是相对于兄弟元素的定位，会影响兄弟元素的位置。

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

块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

一个块格式化上下文由以下之一创建：

• 根元素或其它包含它的元素
• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 具有overflow 且值不是 visible 的块元素
• display: flow-root
• column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

块格式化上下文对于定位 (float) 与清除浮动 (clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

<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>

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

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，也叫外边距合并。前提是普通流中的父子或者兄弟元素,元素之间没有被非空内容、padding、border 或 clear 分隔开。只有上外边距和下外边距才会触发外边距合并,如：

<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p>
<p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>

这两个段落中间的距离，不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的 求和 ，而是两者中的较大者（30px）。都为负时，取绝对值大的。

不让元素合并：

• 为父元素设置 BFC 或 padding 或 border
• 兄弟元素间设置 float 或 inline-block 或 absolute

父子外边距合并例子：

<style>
.parent {
  background-color: grey;
  margin: 10px;
}
.children {
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 3px solid blue;
}
</style>
<div class="parent">
    <div class="children">
    </div>
</div>