入门任务10--浮动定位BFC边距合并

1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
   一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性。 父容器下的子元素如果都出现浮动,会造成父元素容器高度塌陷的问题;但是浮动还是以父容器的内边框为界,并且会出现边框合并的现象。
   对浮动元素：浮动的框可以左右移动(根据float值而定),直到他的外边缘碰到包含框或另一个浮动元素的框边缘。
   对普通元素: 浮动会让元素脱离普通流,如果浮动的元素后面有普通元素,name这个元素的框会表现的像浮动元素没有存在一样。
   对文本影响: 普通元素会忽略浮动元素,但文本内容会移动,给浮动元素留出空间,会有文本行框围绕浮动元素的现象

2. 清除浮动指什么? 如何清除浮动? 两种以上方法
   清除浮动指的是在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
   方法一： 在浮动元素后面加上一个类为clear的空元素，让它的属性为clear: both；
   如图
   

   image.png
   代码链接http://js.jirengu.com/hawav/5/edit
   优点：简单，代码少，浏览器兼容性好。
   缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
   方法二：给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用

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

position: static;该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
position: relative;
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 未定义对 table-*-group, table-row, table-column, table-cell, table-caption 元素应用的效果。

position: absolute;
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
position: fixed;
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

position: sticky
盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

• absolute偏移的参考点首先是父元素，然后检查该父元素是否具有position属性，若具有position属性，则以该父元素为参考点进行偏移，若不具有则继续往上一级找，直到body标签为止。
  relative偏移的参考点是自身位置，是拿偏移前的位置与偏移后的位置进行比较，比如top10px，表现出来的其实是向下移动10px。
  fixed偏移的参考点是浏览器窗口。

4. z-index 有什么作用? 如何使用?
   z-index指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
   定义z-index属性，值必须为整数或者是auto.
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
   使用relative偏移只是看上去位置发生了改变，但实际文档流的位置还是没有变化，但是负margin使得文档流位置发生了变化，从而影响了后续的元素的文档位置。
   如图： image.png
   链接： http://js.jirengu.com/zerir/1/edit?html,css,output

6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
   是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。
   BFC的触发条件：

• 根元素或其它包含它的元素

• 浮动元素 (元素的 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 的元素并不被包裹在一个多列容器中。
  BFC的作用：

• 可以用来实现两栏布局
  如图 链接http://js.jirengu.com/xufof/1/edit?html,css,output
  

  image.png

• 解决父元素高度塌陷
  

  image.png
  代码链接 http://js.jirengu.com/yowuq/6/edit?html,css,output

• 解决相邻垂直窗口的margin合并
  

  image.png
  代码链接http://js.jirengu.com/pibux/1/edit

7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
   外边距合并指的是，两个在普通文档流中的“相邻”元素外边距相遇的时候发生合并的情况。这个所谓的“相邻”可以是父子关系相邻，兄弟关系相邻，甚至如果一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。
   合并的结果为： 当两个外边距都是正数时，取两者之中的较大者；当两个外边距都是负数时，取两者之间绝对值较大者；当两个外边距一正一负时，取的是两者的和。
   相邻的外边距合并：

• 把元素浮动起来，就不会与其他元素的外边距合并代码
  

  image.png

• 把display 设置为inline-block 也不会合并

  
  image.png

• 父子关系的合并
  

  image.png
  http://js.jirengu.com/jubad/3/edit

代码1 https://jsbin.com/cereso/4/edit?html,css,output
代码2 https://jsbin.com/gijocor/2/edit?html,css,output
代码3 https://jsbin.com/cejitof/edit?html,css,output
代码4 http://js.jirengu.com/zacomokuvu/2/edit?html,css,output