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

浮动元素不在文档的普通流中，它可以根据float属性值而左右移动，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘才停止移动。

• 对父容器的影响：如果父容器内的子元素是浮动元素，那么父容器会失去高度，形成父容器塌陷，在浮动元素之外。
• 对其它浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被“卡”住。
• 对普通元素的影响：普通元素感知不到浮动元素，继而占据浮动元素原有的位置，但会被浮动元素遮罩。
• 对文字的影响：文字可感知到浮动元素，会留出空间，形成环绕的效果。

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

1. 空标签清浮动:在父元素的子元素的最后添加一个没有高度的空的块标签，并且设置属性 clear:both;
2. 使父元素形成新的BFC，可以使用的属性：

• overflow：hidden/auto/scroll
• display:inline-block
• float 等等

但是这类方法会带来不同的副作用，需要考虑自身需求，去选择合适的属性去实现效果。

3. 使用伪元素清楚浮动。目前比较标准无副作用的实现方式：

.clearfix{
zoom:1;   /*此段是在确定IE6下也可实现效果*/
}
.clearfix:after{ 
content:"";
display:block;
visible:hidden;
clear:both;
}

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

定位的属性：

这些属性，比较常用的就是 relative；absolute；fiexd三个属性

对于新属性sticky

sticky

可以看到，他的兼容性比较差，所以一般不使用它实现效果，而是采用javascrip来实现。

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

因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，该属性值越高，元素位置越靠上。

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

position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。

position:relative

margin：除了让元素自身发生偏移还会影响其它普通流中的元素。

margin

6.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;
原理大致是这样：
在没有BFC的情况下，两块的margin会相互折叠。
代码：

<div style="width: 200px;height: 200px;background: #cccccc;margin-bottom: 30px;"></div>
<div style="width: 200px;height: 200px;background: #333333;margin-top: 30px;margin-bottom:30px;">   </div>
<div style="width: 200px;height: 200px;background: #666666;margin-top: 50px;"></div>

如图：

alt text

<div style="overflow: auto;width: 100%;">
    <div style="float: left;width: 100%;">
        <div style="margin-bottom: 30px;width: 100px;height: 100px;background-color: #cccccc;"></div>
    </div>
    <div style="float: left;width: 100%;">
        <div style="margin-top: 50px;width: 100px;height: 100px;background-color: #333333;"></div>
    </div>
</div>

结果如下：

Alt text

可以看到，上面示例中的上面灰色div和下面黑色div的margin并没有重叠，这是因为那两个float的父盒子在为它下面的盒子创建了一个BFC，从而将float盒子里面的子盒子给隔离了起来，因此也就不会margin折叠了，这只是创建BFC的一个方法，其它的还有overflow:hidden等，而在这个BFC下的盒子都是遵循BFC的布局规则的。
然后，当块级盒block-level box外层没有BFC作保护，有margin折叠时，是这样的：

而当块级盒block-level box外层有BFC作保护时(比如给下图灰色边框线盒子一个float:left)，则是这样的：

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

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
（1）两个兄弟元素在垂直方向上合并外边距，取较大值进行合并。

#d1 {
  width:100px;
  height:100px;
  margin-bottom:20px;
}
#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
}

这时两个div在垂直距离上的外边距进行了合并，合并后的值是20px。

（2）父子元素间没有阻挡（如：边框、非空内容、padding等）时发生上和/或下外边距合并。
例：

<div class=”parent”>
    <div class=”child”>
    </div>
</div>

.parent{
    width: 200px;
    height: 100px;
    margin-top:10px;
    background-color: red;
}
.child{
       width: 100px;
       height: 100px;
       margin-top:30px;
       background-color: yellow;
 }

这时就会发生合并。合并后的外边距是30px。

关于外边距合并：

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

• 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并：

  
  
  CSS外边距合并的问题

代码实验

• 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并：

  
  
  CSS外边距合并的问题

• 外边距甚至可以与自身发生合并
  假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

  
  
  自身发生合并

  如果这个外边距遇到另一个元素的外边距，它还会发生合并：

  
  
  自身发生合并
  这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并的意义：

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

外边距合并的意义

需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
参考文献

代码题

代码1
代码2
代码3
代码4