1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？
浮动元素按照横向排列的方式进行元素排列，根据float的值为left或right而左向排列或右向排列，直到其外边缘碰到父元素的框或者另一个浮动元素的框的边缘才停止移动。浮动元素脱离了正常的文档流，而相邻的正常文档流又无法感知其存在。
-
浮动元素对 父容器 的影响
会导致父元素高度塌陷，即我们可以理解浮动元素脱离了正常文档流“浮”起来了，因而父元素抓不住其高度导致出现以下效果
float1.png
要解决这个问题就需要清除浮动带来的影响。 -
对 其他浮动元素 的影响
概念中有说一句话“浮动元素直到其外边缘碰到父元素的框或者另一个浮动元素的框的边缘才停止移动”，可以理解为浮动元素对普通文档流中的元素是没有影响的，但是如果都是浮动元素，那么父容器太窄会导致浮动元素无法全部排开，那么浮动元素碰到父元素的框会向下移，直到有足够的空间；如果浮动元素的高度不同，那么元素向下移的时候可能会卡住。
float3.png -
对 普通元素 的影响
如果浮动元素后面有一个正常文档流中的元素，那么正常的文档流中元素是无法感知其存在的，但是正常文档流中元素内的文字是可以感知到浮动元素的存在的，如果文字较多，那文字时会围绕浮动元素做一个排列的。如果想要文字正常排列，那我们需要对浮动元素清除一下他们带来的影响。（利用clear或BFC的方式）。
float2.png -
对 文字 的影响
如果一个父容器中的子元素都是浮动元素，那么对文字没有影响；如果父容器中子元素中有浮动元素和正常文档流元素，那么正常文档流元素会围绕浮动元素排列
float4.png
2、清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动指的是清除子元素的浮动对父元素造成的高度塌陷的问题。
怎样清除浮动？
- 可以在浮动元素的最后面加一个空div来专门清除浮动。但是这样会造成代码冗余，但是在一些特定场景下可用性比较好。
- 给父元素加一个overflow的属性，其值为visible之外的值，即我们可以设置：
overflow:hidden;或overflow:auto或overflow:scroll。 - 我们可以定义一个类，这可以成为我们平时使用的通用清理浮动方法。
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
或
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
- 父容器有定位的相关属性存在，比如：
position为 absolute|fixed但是这个需要按照使用场景来使用。
总结一下就是两种方法：利用 clear属性，清除浮动和使父容器形成BFC。
3、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
定位方式一共六种：
- 默认值：static 当我们文档中没有元素有定位属性时，定位其实是默认static这个值的，相当于不定位，就是正常文档流。
- 相对定位：relative 设置了这个属性的元素是根据自身位置来定位的，位置偏移之后其自身原本的位置还是有留存，不会因为元素便宜之后原来的位置被其他元素占用。相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
-
绝对定位：absolute 设置了这个属性之后元素会寻找对于static定位以外的第一个祖先元素（offset parent）进行定位根据其位置作为参考点进行定位。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。常用在需要根据父元素位置来决定自身位置的情况下。
position1.png - 固定定位：fixed 设置了这个属性之后，元素会根据窗口的位置来定位，和其他定位都没有关系，只是单纯地根据窗口来定位。（常用在广告条上）
- sticky：CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。但是其兼容性非常差，几乎不能用。
- inherit：规定应该从父元素继承 position 属性的值。
实现方式
position:具体值;
top:n px;
left:n px;
right:n px;
bottom:n px;
4、z-index 有什么作用? 如何使用？
z-index是用来设置堆叠顺序的；z-index的数值越高，处于堆叠顺序中层级越高，我们可以理解为距离屏幕越近，距离人眼越近。z-index设置在添加了position属性的元素上，普通文档流元素设置z-index值是无效的。
5、position:relative和负margin都可以使元素位置发生偏移？二者有什么区别？
position:relative使元素发生偏移是相对于自身原本位置发生的偏移，对文档流中的元素不产生任何影响。
负margin使元素发生的偏移会使得文档流中位于负margin作用的元素后的其他元素随着发生偏移。简单概括就是相对定位不会影响到其他元素，而负margin会影响到其他元素。
6、BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
介绍一下BFC的定义：全称block format content。翻译成中文就是“块状格式化上下文”。定义为 Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
BFC有三个特性：
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
- 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
- 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠
- BFC不会重叠浮动元素、
- BFC可以包含浮动
怎样生成BFC？
- float为 left|right
- overflow为 hidden|auto|scroll
- display为 table-cell|table-caption|inline-block
- position为 absolute|fixed
BFC有什么作用？
- 我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果
- 绝对定位形成的 BFC 可用来清除浮动也可用来阻止外边距合并
- 当然，使用BFC去解决浮动问题也有局限性：使用BFC使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式，这是我们不希望的，display这几种方式依然没有解决低版本IE问题。
- IE下：IE6、7内有个hasLayout的概念，当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。 下面使元素hasLayout为true：
- position: absolute
- float: left|right
- display: inline-block
- width: 除 “auto” 外的任意值
- height: 除 “auto” 外的任意值
- zoom: 除 “normal” 外的任意值
- writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout为true
举例说明：http://js.jirengu.com/fimudokigu/3/edit
7、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
在同属于一个BFC下，两个元素可能会发生外边距合并（可能是垂直的也可能是横向的），包括嵌套元素和相邻元素，只要元素之间没有阻挡（边框，padding,非空内容等）就会发生margin重叠。margin合并是取margin大的那个来作为两者之间或与其他元素之间的外边距。
不让相邻元素外边距合并的方法：
- 给某个元素加padding或border;
- 可以让这两个元素不在同一个BFC下即可解决这个问题。生成BFC的方法见问题6。
范例：http://js.jirengu.com/yayiteguqi/3/edit
margin合并.png
另：添加一个负边距合并的情况，这个和正的边距合并其实是一个道理，也是取值比较大的那个作为边距，忽略小的。
负margin合并.png
