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

• 浮动元素的特征：
  1、脱离普通文档流；
  2、可以向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘；
  3、如果同时存在多个浮动元素水平排列，且浮动元素宽度的总和大于容器的宽度，则多出的元素会自动向下一行移动，直到有足够的空间排列；
  4、如果浮动元素的后面有一个文档流中的元素，那么这个元素的框会表现得像浮动元素不存在，但是框内的文本内容会受到浮动元素的影响而移动以留出空间。

• 浮动元素的影响：
  1、对父容器：由于浮动元素脱离了普通文档流，因此无法撑开父容器，可能导致父容器的塌陷；
  2、对其它浮动元素：对同向的浮动元素，会依次紧贴排列，当父容器宽度不足时换行；对不同向的浮动元素，在父容器宽度足够时互不影响，宽度不足时换行；
  3、对普通元素：普通元素会忽视浮动元素的存在而处于浮动元素的下层；
  4、对文字：文字元素会自动环绕浮动元素进行排布。

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

元素浮动可能造成父容器塌陷、元素间的重叠等现象，为了避免此类现象对布局产生的影响，我们需要对浮动元素周围的元素进行清除浮动，从而使页面布局和浮动前一样。

通常我们采用的清除浮动的方法如下：
1、利用 clear属性清除浮动；
2、使父容器形成BFC。

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

有三种定位方式，分别是：普通流，浮动，绝对定位。

1、普通流是默认的定位方式。在普通流中，元素的位置由元素在Html中的位置决定；

2、浮动定位，即利用float属性来给元素定位。浮动的元素会脱离普通文档流，沿其容器的左侧或右侧放置，外边缘碰到包含框或另一浮动元素的边缘时会停下。普通元素察觉不到浮动元素的存在，会占用它原本的空间，文本和内联元素则会自动环绕它进行排布；

3、绝对定位，即通过position属性设置元素的定位。position的值有以下几种：

• inherit：规定应该从父元素继承 position 属性的值；
• static：默认值，没有定位，元素出现在正常的流中；
• relative：生成相对定位的元素，相对于元素本身正常位置进行定位；
• absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位，元素的位置通过 left, top, right 以及 bottom 属性进行规定；
• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过 left, top, right 以及 bottom 属性进行规定；
• sticky：当目标区域在屏幕中可见时，等同于position:relative；而当页面滚动超出目标区域时，则等同于position:fixed，它会固定在目标位置。

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

z-index可以用来设置元素在z轴上的位置，从而改变重叠元素间的位置关系。
当若干元素被设置了position非static属性后，可以为它们添加z-index值。z-index值越大，则元素的位置会越位于上层。

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

position:relative：相对于自身原有的位置发生偏移，但元素占据的依然是原有的空间，因此不会影响其它元素的布局，且可能产生元素间的重叠；
负margin：使元素直接产生移动，改变了元素占据的位置，会对其它元素造成布局上的影响。

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

BFC，即Block Formatting Context，中文常译为块级格式化上下文。可以理解为一个特殊的容器，容器内部的元素布局不受外界影响，也不会影响外界。

生成BFC的条件：
1、float为 left|right；
2、overflow为 hidden|auto|scroll；
3、display为 table-cell|table-caption|inline-block；
4、position为 absolute|fixed；

BFC的作用：
1、清除浮动，如下图所示：

当唯一的子元素浮动时，父元素会产生塌陷。在这里我们同样利用浮动，将父级元素生成BFC，这样就清除了子元素的浮动，有效避免了塌陷问题。

2、消除外边距合并，如下图所示：

当父子元素同时拥有margin-top:50px时，会产生外边距合并的现象。在这里我们给父级元素加上float样式，生成BFC，可以发现父子元素的外边距不再合并。

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

外边距合并场景：
1、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并；
2、当一个元素包含在另一个元素中时，它们的上/下外边距也会发生合并；
3、空元素的自身上外边距与下外边距也会发生合并。

合并规则：
1、当 margin 都是正值的时候，取其中的最大值；
2、当 margin 都是负值的时候，取其中绝对值最大的，进行负向位移；
3、当 margin 有正有负的时候，取负 margin 中绝对值中最大的，和正 margin 中最大的 相加。

避免合并的方法：可以让其中一个或多个元素生成BFC，使这些相邻元素不在同一个BFC中，即可有效避免外边距合并。

父子外边距合并实例：

由上图可以看出，蓝色div的高度为30px，红色div和黄色div分别有30px的margin-top，但它们的margin-top并没有叠加为60px，而是合并成了30px。