1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征：
- 浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；
- 浮动元素不在文档普通流之中，因此文档普通流中的块级元素感知不到浮动元素的存在；
- 在css中任何元素都可以浮动，浮动元素会生成一个块级框，而不论该元素本身是什么元素
对父容器的影响：浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘,若父元素没有设置高度，则父元素高度塌陷，高度为0；父元素若没有设置高度，高度会塌陷，若设置高度，高度则不受影响。无论设不设置高度，浮动元素边框都会考到父元素边框。
对其他浮动元素的影响：浮动元素都向某个方向移动，直到其边框碰到其他元素的边框，如果包含框太窄，无法容纳多个浮动元素，那么其浮动元素向下移动，直到拥有足够的空间，如果浮动元素的高度不同，那么它们向下移动时可能被其他浮动元素卡住。
对普通元素的影响：普通元素感知不到浮动元素的存在，但是普通元素的文字会受到影响；由于普通元素感知不到浮动元素，所以它会占据浮动元素的位置，但是浮动元素的层级比普通元素高，因此时长发生浮动元素掩盖在普通元素上的情形。
对文字的影响：块级元素包含的文本则可以感知到浮动元素的存在,文字会环绕在浮动元素周围。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动是指解决父元素高度的塌陷问题。
方法：
1.给父元素增加一个空子标签.clearfix，将其属性设为：
.clearfix:after {
content: '';
display: block;
clear: both;
}
2.使用BFC清除浮动，将父元素设为BFC，设为BFC的方法：
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- inherit 规定应该从父元素继承 position 属性的值
- static 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
- relative 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px
- absolute 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定.设置后会脱离普通文档流。absolute类似float，会提升自己的层级，很有可能覆盖其他元素，若祖辈元素都没有设置除static以外的值，则以html的border为基准定位，若设置了，则以父元素的padding为基准。绝对定位使用场景例如：设置上级元素为position:relative，然后可以利用绝对定位使该元素相对于上级元素移动到任意位置。
- fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定,
- sticky CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置.
4.z-index 有什么作用? 如何使用?
z-index 属性指定一个元素的堆叠顺序。因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。
z-index规定了元素在Z轴（距离用户远近）上的顺序，值越大则越靠近用户，表现就是元素在最上面。
z-index仅在设置了position非static属性的元素生效，且z-index的值只能在兄弟元素之间比较。
Z-index默认值为auto,则不建立层叠上下文。设置为0则会建立层叠上下文。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- 负margin除了自身会产生偏移，还会影响到其它文档流元素，破坏文档结构。
- position:relative是相对于自身位置偏移，不会影响到其它文档流元素。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC是块级格式化上下文，生成方法：
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
作用：
1.清除浮动
2.自适应两栏布局
3.防止垂直 margin 重叠
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
情景：
-
元素自身叠加 当元素没有内容（即空元素）、内边距、边框时， 它的上下边距就相遇了， 即会产生叠加（垂直方向）。 当为元素添加内容、 内边距、 边框任何一项， 就会取消叠加。
空元素 -
相邻元素叠加 相邻的两个元素， 如果它们的上下边距相遇，即会产生叠加。
相邻元素 -
父子元素叠加 子元素的外边距隔着父元素的内边距和边框， 当这两项都不存在的时候， 父子元素垂直外边距相邻， 产生叠加。 添加任何一项即会取消叠加。
父子元素
合并规则：
- 两个margin都是正值的时候，取两者的最大值；
- 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
- 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
- 所有毗邻的margin要一起参与运算，不能分步进行。
如何防止：
- 被非空内容、padding、border 或 clear 分隔开。
- 不在一个普通流中或一个BFC中。
- margin在垂直方向上不毗邻。
