浮动定位BFC（Task 10）

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

特征：
浮动元素都会生成一个块级框，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。浮动元素周围外边距不会合并。

对父容器：
因为浮动元素从正常文档流中删除，所以父容器就会认为浮动元素不存在，导致父容器无法撑开。

对其他浮动元素：
各浮动元素之间按照浮动方向水平排列，浮动元素之间不会彼此覆盖重叠。当包含块同一行宽度不够容纳所有浮动元素时，剩余浮动元素会向下换行排列。如果浮动元素的高度不同,那么向下移动的时候可能被卡住。

对普通元素：
普通元素在正常文档流中排列，就像浮动元素不存在一样。
行内框与一个浮动元素重叠时，其边框，背景，内容都在该浮动元素之上显示。
块框与一个浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示。

对文字：
文字会识别浮动元素并环绕在它周围。

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

清除浮动指为元素设置禁止浮动元素出现在它旁边。如果一个元素可能放在一个浮动元素旁边，则会向下推，直到出现在所有浮动元素的下面。

clear属性清楚浮动：

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

BFC清楚浮动：
BFC特征：
BFC会阻止垂直外边距（margin-top、margin-bottom）折叠。
BFC不会重叠浮动元素。
BFC可以包含浮动。
触发方式：
为浮动元素的包含元素设置
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed

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

相对定位：
对定位元素设置position: relative;
生成相对定位的元素，相对于元素本身正常位置进行定位。
在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变。适用于想要改变元素所在位置但不想影响布局的情况。
绝对定位：
对定位元素设置position: absolute;
对包含块元素设置position为非static。
参考点为position值不为static的祖先元素，如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。
适用于想要元素脱离文档流单独定位的情况。
固定定位：
对定位元素设置position: fixed;
固定定位是绝对定位的一种，固定定位的元素也不包含在普通文档流中，差异是固定元素的包含块是视口（viewport）。
适用于想让元素固定出现在窗口上的某一位置而不随页面的滚动而滚动。

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

当元素重叠时，z-index属性可以改变元素互相覆盖的顺序。
z轴方向从前向后（越来越远离用户）。
有较高z-index值的元素会覆盖z-index值较低的元素。
z-index值的比较仅在同级元素中有效。若两个元素有不同的父元素，他们的z-index值互相比较是毫无意义的。

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

position:relative;相对定位的造成的偏移本质上是元素内容的位移，视觉上看上去元素发生了位移。但在文档流及页面布局中，元素占用的位置没有发生变化。
通过设置margin外边距使元素产生偏移相当于直接改变元素的盒模型，此时会对页面其他元素的布局产生影响。

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

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的高度时，浮动元素也参与计算。

作用：

阻止margin重叠

示例图

通过设置overflow: hidden;使第二个ul生成BFC，阻止了ul与li之间的垂直外边距重叠。
清除浮动

示例图

通过设置包含块的overflow: hidden;使包含块可以包含浮动元素而不塌陷。

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

外边距合并指的是，当两个垂直外边距相遇时，它们将合并形成一个外边距。
当两个外边距数值都为正时，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当两个外边距数值都为负时，浏览器会取两个外边距绝对值的最大值作为外边距。
当两个外边距数值一正一负时，会从正外边距减去负外边距的绝对值。
可在两元素外边距合并的边界设置border边框或padding内边距来防止合并。
也可通过设置BFC让相邻的两个元素处于不同BFC中，达到阻止外边距合并的目的。

示例图

上图中上方的列表中ul与li的外边距发生了合并。li的20px下外边距被ul的50px下外边距合并，两个列表之间的50px外边距也互相合并，所以两个列表之间距离显示为50px。