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

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，文本和内联元素将围绕它。
然后，该元素从网页的正常流动中获取，尽管仍然保持一部分流动，与绝对定位相反。

• 影响

1. 对于父容器而言，如果没有设置其高度，而子元素设置float，会造成‘塌陷’的效果。可用BFC原理或者清除浮动解决.
2. 对于其他浮动元素而言： 如果宽度足够会水平排列; 不足会下移靠左/右移动;当第一个浮动元素的高度大于第3个浮动元素的高度并且整体宽度不足以水平放下多个浮动元素,会造成‘卡住’的效果。
3. 普通元素：

• 当为块级元素时会当浮动元素不存在
• 当为内联元素时会‘感知’浮动元素，环绕浮动元素。

清除浮动是指什么？如何清除浮动？

清除浮动是指结合clear属性让父元素在视觉上包围浮动元素。清除浮动的方法：

1. 在父元素的子元素最后添加一个空div，并对其设置样式：clear:both;由于在子元素最后添加了空div，并清除了浮动，因此父容器被撑开，实现了在视觉上包围浮动元素的效果。
2. 利用BFC来清除浮动。因为BFC可以包含浮动，因此可以让父元素生成一个新的BFC从而包围浮动的子元素。
   可以对父元素设定以下样式之一生成新BFC。
   float: left / right;
   overflow: hidden / auto / scroll;
   display: table-cell / table-caption / inline-block;
   position: absolute / fixed;

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

position: relative 根据自身定位
absolute 根据已定位的父级来绝对定位,都没有根据HTML来进行定位.
fixed 根据浏览器窗口来进行定位
static 默认样式
sticky 可以看成是relative和fixed的集合体.当在页面可视范围内以relative，当页面滚动超出目标区域时，以fix定位.
一般 absolute 配合 relative使用.当父容器的宽高可变时，使用绝对水平垂直居中。
sticky 是css3的新属性，兼容性不太好。

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

层叠上下文 .配合定位使用 z-index大的在上,小的在下。
这里说一下我的理解：

1. BFC和层叠上下文没关系
   BFC的目的是让自己块中的元素（包括float）不会影响其他元素，在二维平面内。（这个说法并不准确，准确的来说是让该元素内部的元素对外部元素所产生的影响转变成该元素对外部元素产生影响）。
   而层叠上下文，是指覆盖逻辑(z-order)

特性:

层叠上下文的层叠水平要比普通元素高；
层叠上下文可以阻断元素的混合模式（见此文第二部分说明）；
层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。
每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

原则

谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

(以上来自张鑫旭大神的博客，这里摘抄一下）
这里要注意，虽然z-index只能对定位元素应用，但是z-index也会使该定位元素对其他元素产生影响（其他元素默认值应该为z-index=0）。该元素的子元素和其他上下文元素中的子元素覆盖关系取决于这两个元素之间的关系（原因还是在张鑫旭大神的博客中。地址)

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

根据元素还在普通文档角度看。设置positon: relative 还在原来的文档流，-margin则相反（-margin有可能会被其它元素所覆盖，不清楚为什么如果那位大神知道请教我）。
示例

image.png

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

块级格式化上下文(block formart context) css2.1新增的一个概念。它是页面中的一个渲染区域，有自己的一套渲染规则。里面的子元素根据这个规则进行定位. （可以理解为一个与外界格局的包含块，里面不管浮动 定位 什么的 即使在怎么'翻江倒海'都不会其临边的元素.该怎么就怎么显示）body 根元素浮动元素定位元素 position: absolute/fixedpositon: relative/sticky/static不会触发BFC

qq 20170503230045 display: inline-block /table-cell/flexoverflow: auto/hidden/srcoll 除了visible一般如果父容器不设置高度，里面的子元素采用某种方式脱离文档流，会造成高度塌陷。BFC可以解决父容器没有高度的问题。比如实现一个两栏布局: [父元素可以实现高度自适。,可以实现一个简单的二栏布局。

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

普通文档流，同一个块级上下文中 的垂直方向上。为什么会产生这种效果,完全是历史遗留问题，主要是为了解决文字排版的需求。比如相邻的块级分别设置margin为50px 和 100px. 会选择大的margin作为参考值

qq 20170503231828
比如 元素内嵌套多个div，最终参考的是marign最大的那个值. qq 20170503232222 相邻的两个元素一个正maing一个是负margin，最终取计算后的值。可以不在同一个块级上下文中。

• 如何阻止合并
  形成BFC 可以阻止外bian'ju合并，对于垂直相邻的元素可以设置浮动或设置其中一个元素为display:inline-block;对于父子元素外边距，可为父元素设置padding或border。