浮动定位BFC边距合并

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

浮动元素位于普通文档流之外， 根据float属性值而左右移动，直到它的外边缘碰到包含框或者另一个浮动元素的外边框才停止移动。
对父容器的影响：如果父容器的子元素全部是浮动元素,那么父元素将感知不到浮动元素的高度(高度塌陷)。
对其他浮动元素的影响：各浮动元素之间按照浮动方向水平排列，当包含块同一行宽度不够容纳所有浮动元素时，剩余浮动元素会向下换行排列，如果浮动元素的高度不同,那么向下移动的时候可能被卡住。
对普通元素的影响：文档流中的普通元素感知不到浮动元素的存在。
对文字的影响：文字会感知到浮动元素的存在，环绕在浮动元素周围。

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

清除浮动指：解决浮动元素的父元素高度塌陷问题，使父元素视觉上包含浮动元素。
清除浮动方法：
1.父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握 。
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 。
建议：不推荐使用，只建议高度固定的布局时使用 。
2.结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 。
优点：简单、代码少、浏览器支持好、不容易出现怪问题 。
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好 。
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法 。
3.父级div定义 伪类:after 和 zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。

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

1. static（默认）
   元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
   参考点：普通文档流
   使用场景：默认不加其他定位方式就是static
2. inherit
   从父元素继承position
3. relative
   相对定位元素，设置偏移后其原本占据的位置仍在文档中。
   参考点：相对于元素本身正常位置进行定位
   使用场景：不想影响其他元素的位置、作为绝对定位的参考点。
4. absolute
   生成绝对定位的元素，脱离文档，不再占据文档中的空间，其他元素会填充原本的空间
   参考点：相对于static定位以外的第一个祖先元素（offset parent）进行定位
5. fixed
   固定定位，脱离文档流，不再占据原空间
   参考点：相对于浏览器窗口
   使用场景：应用在各种不随滚动条变化的内容
   sticky：
   属性：CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。由于兼容性问题，此类效果通常由js实现。

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

z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
当元素重叠时，z-index属性可以改变元素互相覆盖的顺序。
z轴方向从前向后（越来越远离用户）。
有较高z-index值的元素会覆盖z-index值较低的元素。
z-index值的比较仅在同级元素中有效。若两个元素有不同的父元素，他们的z-index值互相比较是毫无意义的。

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

position:relative：只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
margin：除了让元素自身发生偏移还影响其它普通流中的元素。

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

BFC的全称是 Block Format Content直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
生成BFC：
（1）float的值不为none；
（2）position的值不为relative；
（3）overflow的值不为visible；
（4）display的值为inline-block、table-cell、table-caption、flex或inline-flex。
BFC的作用：
a.不和浮动元素重叠；
b.清除元素内部浮动；
c.解决上下相邻两个元素重叠的问题。

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

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

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

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
外边距合并规则：

• 当两个margin都是正值的时候，取两者中的最大值；
• 当两个margin都为负数时，取其绝对值的较大者，然后，从0位置，负向位移；
• 当两个margin为一正一负时，取两者之和。

不让相邻元素外边距合并：
1.设置阻挡，例如：padding，边框，非空内容,clear。
2.不在一个普通流中或一个BFC中。
3.margin在垂直方向上不毗邻。

父子外边距合并：