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

特征：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值确定），知道浮动框碰到包含框或者另一浮动元素的框的边缘。浮动元素不在文档的普通流中，因此文档普通流的块级元素感知不到浮动的存在。
对父容器的影响：如果父容器的子元素都是浮动元素，那么父容器会造成高度塌陷，在浮动元素之外。视觉上，父容器没有包含住浮动的子元素。
其他浮动元素：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
普通元素：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。
文字：文字所在行框内会受浮动元素的排挤，文字环绕浮动元素排列。

2. 清除浮动指什么? 如何清除浮动?

清除浮动：消除浮动元素对其父元素因浮动元素造成的高度塌陷的问题
清除浮动方法：
1.在父元素的子元素最后添加一个空div，并对其设置样式：clear:both;
由于在子元素最后添加了空div，并清除了浮动，因此父容器被撑开，实现了在视觉上包围浮动元素的效果。

image.png

2.使父元素形成 BFC包含浮动！
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
根据实际情况来形成BFC！

image.png

3.通用法
对父元素设置css来清除浮动，通用方法，无副作用

.clearfix {
*zoom:1;
}
.clearfix {
content: "";
display: block;
clear: both;
}

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

• inherit 规定应该从父元素继承 position 属性的值
• static 默认值，没有定位，元素出现在正常的文档流中。
• relative 相对定位，相对元素本身正常位置进行定位。left:20px 会向元素的 left 位置添加20px。使用场景：部分居中布局
• absulute 绝对定位，相对于static以外的第一个祖先元素进行定位。使用场景：二级菜单
• fixed 固定定位，相对于浏览器窗口进行定位。使用场景：页面广告
• sticky css3新属性，表现类似position：relative和position：fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed，会固定在目标位置。使用场景：搜索列表页的侧边菜单

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

z-index作用：z-index属性设置了元素的堆叠顺序，拥有更高堆叠顺序的元素会处于堆叠顺序较低的元素前面。

• z-index属性设置了一个定位元素沿Z轴（垂直屏幕的一条轴线）的位置，如果轴线的只为正，则离用户更近，如果轴距为负，离用户更远。
• z-index可以影响层叠水平，但只限于position（非static）定位元素以及flex盒子的子元素生效。
• z-index值为auto时，不建立层叠上下文，设置了数值（即使是0）就会创建层叠上下文了。

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

position:relative元素相对自身偏移，不会影响同一级的其他元素。
而margin则会影响到其他元素的布局

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？

BFC（Block formatting contexts）：翻译过来就是块级格式化上下文，指的是一种上下文环境，具有对内部元素的包裹性及对外部元素的独立性。可以用来清除浮动。

特性：

• BFC会阻止垂直外边距
• BFC不会重叠浮动元素
• BFC可以包含浮动

如何形成BFC：

float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
可以利用BFC可以包含浮动的特性来“清除”浮动，第二个（清除浮动）问题里有举例子！

7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？

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

外边距合并的三种情况：
1.相邻的兄弟姐妹元素
2.块级父元素与其第一个/最后一个子元素（若块级父元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有父元素的 border、padding、inline- content、height、min-height、 max-height 分隔时，就会发生下外边距合并现象。）
3.空块元素

合并方式：

• 两个margin为正时，取两者较大值
• 两个都为负时候，取绝对值的较大值，负方向移动
• 当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。

消除边距合并方式
方式一：形成BFC
overflow的值为auto或者hidden时这个必须外面还要包裹一层父元素。

image.png

方式二：浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）

【个人总结，如有错漏，欢迎指出】
：>