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

答：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
对父容器的影响：如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零，也就是所谓的“父容器塌陷”。（如下图所示）

image.png

其他浮动元素的影响：浮动元素会按照顺序排列下去，若父容器剩余的宽度不够放下下一个浮动元素，那么它将向下移动，若是高度不同，在下移的过程中，浮动元素还有可能会被卡住。(如下图所示）

image.png

对普通元素的影响：普通元素无法感知到浮动元素，会被浮动元素遮挡（如下图所示，box3被遮挡住了）

image.png

对文字的影响：文字可以感知浮动元素，会围绕浮动元素(如下图所示）

image.png

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

答：清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。
两种方法：
1.如果我们想让父元素在视觉上包围浮动元素可以像下面这样处理，在最后添加一个空div,对它清理，缺点是增加了一个无意义的标签。(如下图）

image.png

2.利用伪元素清除浮动(如下图所示）

image.png

3.利用BFC清理浮动(如下图）

image.png

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

image.png

CSS有三种基本的定位机制：普通流、相对定位和绝对定位
1.普通流是默认定位方式，在普通流中元素框的位置由元素html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。
2.相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在它所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变。
3.绝对定位与固定定位
● 相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中的位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样。
● 绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初识包含块html来定位。
● 因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
● fixed固定定位，固定定位是绝对定位的一种，固定定位的元素也不包含在普通文档流中，差异是固定元素的包含块儿是视口（viewport)

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

答：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute、relative、fixed）
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

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

position:relative是相对于自身在文档流的位置发生偏移，原本所占有的位置不会被其他元素占据，外形发生了移动但本身的位置是不动的；而负margin则文档流的位置会发生偏移，会让后面的元素也发生位置的偏移。

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

BFC全称是Block Format Content，块级格式化上下文
BFC特性：具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海都不会影响到外部。
触发BFC：
只要满足元素下面任一条件即可触发BFC特性：
● body根元素
● 浮动元素：float除none以外的值
● 绝对定位元素：position(absolute、fixed)
● display为inline-block、table-cells、flex
● overflow除了visible以外的值(hidden、auto、scroll)
BFC作用：
● 同一个BFC下外边距会发生折叠，如果想要避免外边距的重叠，可以将其放在不同的BFC容器中。
● BFC可以包含浮动的元素（清除浮动）
● BFC可以阻止元素被浮动元素覆盖

1、BFC会阻止垂直外边距（margin-top、margin-bottom)折叠
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡（例如边框，非空内容，paading等）就会发生magin重叠
因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给他们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠。
2、BFC不会重叠浮动元素
3、BFC可以包含浮动(overflow:auto; overflow:hidden；副作用比较小；

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

答：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
1.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

image.png

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

image.png

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

(注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。)
形成BFC 可以阻止外边柜合并，对于垂直相邻的元素可以设置浮动或设置其中一个元素为display:inline-block;对于父子元素外边距，可为父元素设置padding或border。