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

浮动元素能够脱离正常的文档流，可以根据float的值在整个html页面中靠左或者靠右，分别到达html边界或者其他浮动元素的边界位置。

如果父元素的子元素都是浮动元素的话，父元素将失去原有高度，造成高度坍塌，是因为当子元素都是浮动元素的话，脱离了正常的文档流，因此父元素会认为自己本身没包含任何内容，因此高度为0。

对于其他浮动元素,当整个包含块宽度不够时候，而且子元素都是浮动排列的话，其他子元素就会往下面移动，直到有足够位置放置本身。但是如果浮动元素之间高度本来都不一致，有可能会导致浮动元素卡住。

对于普通元素而言，由于浮动元素脱离了正常的文档流，因此普通元素无法识别到浮动元素，因此会在原来的文档流位置中，但是浮动元素会覆盖到相应的普通元素之上。

对于文字而言，文字可以识别到浮动元素的存在，文字过少的话会在浮动元素的一侧排列，而不会和浮动元素发生重叠；当文字过多时候，文字在一侧排列完成之后，会转移到浮动元素下侧，包裹住浮动元素。

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

如果父元素的子元素都是浮动元素，而且父元素又没有设置相应高度，则会造成父元素的高度坍塌，或者块状元素会被相应位置上的浮动元素覆盖，当我们不希望这种效果的时候，就可以利用清除浮动来实现，所谓清除浮动，是清除相应元素周边的浮动元素，能够是正常元素得以表现，或者避免父元素的坍塌。

可以利用clear:both来清除相应块状元素两侧的浮动元素。
可以利用父元素成为BFC来消除浮动影响，可以使用overflow: hidden/auto/stroll; display: inline-block; float: 方位;等来实现将父元素变成BFC。

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

有6种定位方式

inherit 规定从父元素上继承position的属性
static 默认值，没有定位，正常出现在文档流中(忽略top right bottom left和z-index的声明)
relative 相对定位，相对与目前的位置进行定位
absolute 生成绝对定位，相对于static定位以外的第一个祖先元素进行定位，元素的位置通过top，left，bottom，right的属性进行规定
fixed 生成绝对定位元素，相对于浏览器窗口进行定位，元素的位置通过top，left，bottom，right的属性进行规定
sticky CSS3新属性，表现类似position: relative和position: fixed的合体，在目标区域在屏幕中可见时，它的行为就像position: relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置

Z-index有何作用，如何使用？

由于浮动元素脱离了正常的文档流，因此当出现覆盖情况时候可以用z-index来表明在垂直位置上的前后关系，即叠放的顺序。值越大表明越靠前，值越小表明越靠后。

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

position:relative表示的元素在原本的位置上进行定位，但是无论元素是否移动，在文档流的位置始终保持不变，只是在页面上显示的位置发生了变化，但是负margin也能使元素的位置发生变化，但是元素在整个文档流的位置也会发生变化。

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

BFC全称是 block format content.
生成BFC

float为 left | right
overflow为 hidden | auto | scroll
display为 table-cell | table-caption | inline-block
position为 absolute | fixed

BFC具有三个特点，分别为可以阻止垂直外边距的折叠；BFC不会重叠浮动元素；BFC可以包含浮动。
因此可以利用BFC包含浮动的特性来“清除浮动”，从而排除一些浮动元素生成的负面效果。
解决margin重叠问题，在同一个BFC中，相邻元素之间的边距会合并，如果把这两个元素分别放在两个BFC中，那么他们的边距就不会合并。一般应用于嵌套关系

例子：可以给父容器添加相应属性来形成BFC，从而达到清除浮动的效果

<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
    <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
    </div>
</div>

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

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

Paste_Image.png

情况2：当一个元素包含在另一个元素中时

Paste_Image.png

情况3：假设有一个空元素，具有外边框，但是没有内容以及填充，上下边距碰到一起，它们会发生合并。

Paste_Image.png

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

Paste_Image.png

为了不让相邻的元素的外边距合并，可以利用BFC的特性，将不同的元素放置在不同的BFC里。

例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
.parent{
    margin-top: 10px;
    background-color: green;
 }
.child{
  margin-top: 40px;
  background-color: red;
}
body{
  width: 300px;
  height: 300px;
  border: 1px solid;
}
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">
      ddddd
    </div>
  </div>
</body>
</html>