浮动定位BFC边距合并

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

特征：浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示

浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐

浮动元素后面的内联元素会向此浮动元素的外边距靠齐

1、对其父元素的影响
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷
2、对其兄弟元素（非浮动）的影响
如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
3、对其兄弟元素（浮动）的影响
同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下

1.浮动元素：能感知浮动元素的存在，碰到其他浮动元素的边框时会停止。

2.普通元素:块级元素无法感知浮动元素的存在，会占据其空间；行内元素不会占据浮动元素空间。

3.文字：文字会被浮动元素挤开，环绕浮动元素排布。

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

清除浮动，简单的说就是清除浮动所带来的影响，像题一中的浮动带来的影响。
如何清理浮动
方法一：利用:after伪类
div:after {content: " ";
width: 0;
height: 0;
clear: left;
}
方法二 ：利用overflow:hidden,设置父元素的样式
方法三 ：利用空的span标签，样式设置为宽度高度都为0，字体大小为0，行间距为0，加上clear:both;

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

值 描述
1.inherit 规定应该从父元素继承 position 属性的值。
2.static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
3.relative 生成相对定位的元素，相对于其正常位置进行定位。应用于本身的细微调整，对于其它元素来说，设置该属性的元素还在原来的位置上。
4.absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
如果没有找到，就以html来进行定位。可以应用于垂直居中定位，或者元素的定位
5.fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可以应用于类似于淘宝周边两侧的广告栏这种模式，随页面滚动不变，官网的回到顶部等等。

z-index 有什么作用? 如何使用? （修改）

定义：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效（例如 position:absolute;）

image.png

使用情况：
z-index可用来设置元素在z轴上的位置，从而改变重叠元素间的位置关系。
当若干元素被设置了position非static属性后，可以为它们添加z-index值。z-index值越大，则元素的位置会越位于上层。
正负数情况：如果为正数，则离用户更近，为负数则表示离用户更远。
层叠准则：
①谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-index值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
②后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
③如果层叠上下文元素不依赖z-index数值（设置的CSS3某些属性），则其层叠顺序是z-index:auto可看成z:index:0级别；如果层叠上下文元素依赖z-index数值，则其层叠顺序由z-index值决定。
参考w3c 文档
http://www.w3school.com.cn/cssref/pr_pos_z-index.asp

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

position:relative，元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素在文档流中的布局。
负margin，元素的显示位置和在文档流中的位置均发生变化，会影响后面元素在文档流中的位置。

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

BFC是块级格式上下文。其定义是：浮动、绝对定位（绝对定位、固定定位）元素、块级容器（如inline-block、 table-cell、table-caption）并不是块级盒子，还包括哪些overflow属性值取值visible以外的块级盒子，会为它们的内容物创建一个新的块级格式化上下文。对元素设置以下属性就可以生成BFC：
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;

image.png
作用：实例 对嵌套元素不发生垂直外边距重叠
http://js.jirengu.com/qawajagevu/1/edit?html,css,output
实例2
http://js.jirengu.com/rihegojipi/2/edit

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

外边距合并：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

父子元素外边距合并：当一个元素包含在另一元素中时（两个元素中间没有内边距和边框隔开），它的上下外边距就会合并。

不让相邻元素外边距合并：阻止嵌套元素的外边距合并形成BFC可以阻止外边柜合并或者元素上加上border或者padding。

margin为负时外边距合并情况：当两个外边距都为负时，取绝对值的较大值。当两个外边距为一正一负时，取两值的和。
http://js.jirengu.com/qawajagevu/1/edit?html,css,output