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

浮动元素

浮动元素是设置float为非none值的元素，这时该元素会自动被设置成块元素，可以设置宽度、高度以及边距。浮动元素，顾名思义，使该元素浮动在其他元素之上，离开了原来的文档流，直到浮动到父元素的左右边距（上下边距不受限制）或者左、右方遇到其他设置了float的元素。而其附近设置的浮动元素会跟其边距相邻，表面上跟内联元素似的。而非浮动元素则相对复杂一些，分一下两种情况：浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示，若是非浮动块级元素跟在浮动元素后边且在定位后产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素不在非浮动元素的部分显示。

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

image.png

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

image.png

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

image.png

浮动元素的影响

• 对其父元素的影响：
  • 对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷
• 对其兄弟元素（非浮动）的影响
  • 如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
  • 如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
• 对其兄弟元素（浮动）的影响
  • 同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面。
  • 反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下。
• 对子元素的影响
  • 当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度、宽度和非浮动元素高度、宽度之间的最大值。

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

浮动

浮动：一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开

清除浮动的方法

• 1.给浮动的元素的祖先元素加上高度
  • 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素.所以就是清除浮动带来的影响了。
• 2.添加新的元素 、应用 clear：both

HTML：
<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

CSS：
.clear{clear:both; height: 0; line-height: 0; font-size: 0}

（纠正： padding不会受影响）

• 3.父级div定义 overflow非 visible

 HTML：
<div class="outer over-flow"> //这里添加了一个class
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <!--<div class="clear"></div>-->
</div>

CSS：
.over-flow{
    overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
}

• 4.:after 方法

.outer {
    zoom:1;
}    /*==for IE6/7 Maxthon2==*/
.outer :after {
    clear:both;
    content:'.';
    display:block;
    width: 0;height: 0;
    visibility:hidden;
}   /*==for FF/chrome/opera/IE8==*/

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

static(默认)

• 当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适合，取得相对较好的布局效果。
• 一般来说，我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。

relative(相对定位)

• 在static的基础上，如果我想让一个元素在他本来的位置做一些调整(位移)，我们可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)。
• 有一点需要注意的是，相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。

absolute(绝对定位)

• 如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。
• 绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。

fixed(固定定位)

• 我们知道absolute定位的参照物是“上一个定位过的父元素(static不算)”，那么如果我想让一个元素定位的参照物总是整个文档(viewport)，怎么办呢？答案是使用fixed定位，fixed定位的参照物总是当前的文档。利用fixed定位，我们很容易让一个div定位在浏览器文档的左上，右上等方位。比如你想添加一个信息提示的div，并将该div固定在右上方，你可以使用以下css
  .element { position:fixed; top:2%; right:2%; }

float(浮动)

mix relative and absolute(混合相对定位和绝对定位)

• 如果对一个父元素设置relative，而对它的一个子元素设置absolute,则子元素的绝对定位的参照物为父元素。

reference

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

z-index

• z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

z-index

• 层级关系的比较
  • 对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。
  • 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。
  • IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。
  • z-index为auto的元素不参与层级关系的比较，由向上遍历至此且z-index不为auto的元素来参与比较。
• 顺序规则
  • 如果不对节点设定 position 属性，位于文档流后面的节点会遮盖前面的节点。
• 定位规则
  • 如果将 position 设为 static，位于文档流后面的节点依然会遮盖前面的节点浮动，所以 position:static 不会影响节点的遮盖关系。
  • 如果将 position 设为 relative (相对定位)，absolute (绝对定位) 或者 fixed (固定定位)，这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点，说明前者比后者的默认层级高。
  • 在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A' 会覆盖 B.

html
<div id="a">
       <div id="a-1" style="position:relative;">A-1</div>
</div>
<div id="b">B</div>

image.png

• 参与规则
  • 不用 position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作用. z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.
• 默认值规则
  • 如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.
• 从父规则
  （1）如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.

<div id="a" style="position:relative;z-index:1;">
        <div id="a-1">A-1</div>
</div>
<div id="b" style="position:relative;z-index:0;">
        <div id="b-1">B-1</div>
</div>

image.png

（2）如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.

image.png

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

position:relative

• 在static的基础上，如果我想让一个元素在他本来的位置做一些调整(位移)，我们可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)。
• 相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。

负margin

• 使元素位置偏移，使元素在文档流中的位置发生了改变，其后的元素受其影响。

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

BFC--块级格式化上下文

BFC--块级格式化上下文

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

BFC--块级格式化上下文

BFC--块级格式化上下文

margin重叠 ：

• margin参数：上右下左（4个值），其他：四个边距两两对称，比如3个值时，分别对应上右下， 左边边距和右边值一样。

• margin折叠结果：

  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时，折叠结果是两者的相加的和。