浮动定位BFC边距合并

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

• 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示。
• 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐。
• 浮动元素后面的内联元素会向此浮动元素的外边距靠齐。

1. 对其父元素的影响
   对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷
2. 对其兄弟元素（非浮动）的影响
   如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
   如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
3. 对其兄弟元素（浮动）的影响
   同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
   反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下
4. 对子元素的影响
   当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
5. 对文字的影响
   浮动元素旁边的文字框被缩短，从而给浮动元素留出空间，文字框围绕浮动元素。

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

清除浮动不是不要浮动，而是清除浮动带来的不利影响，以此来解决父元素高度塌陷现象。
解决方法：

• 添加一个div标签，设置clear:both能清除浮动，并撑开父元素。
• 使父容器形成BFC。

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

• inherit
  规定应该从父元素继承 position 属性的值。
• static
  默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
• relative
  生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px。
• absolute
  生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定。
• fixed
  生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。
• sticky
  CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

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

z-index 属性指定一个元素的堆叠顺序。

• z-index 值较大的元素将叠加在z-index值较小的元素之上。
• z-index属性适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序。
• z-index只可比较同级元素。
• z-index的默认值是auto，z-index设为0时，会产生堆叠顺序，z-index也可以设为负数。

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

• position:relative 是相对于自己本来的位置发生偏移，对其他文档流元素无影响。
• mairgin:负值 自身位置偏移，也会影响文档流元素。

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

BFC（Block Formatting Context）：块格式化上下文。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

生成BFC：

• 根元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed

BFC作用：

• 不和浮动元素重叠
  如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏布局就是这么做的。
• 清除元素内部浮动
  只要把父元素设为BFC就可以清理子元素的浮动，最常见的用法就是在父元素上设置overflow: hidden样式。
• 解决上下相邻两个元素重叠
  将其中一个元素生成BFC能使上下相邻两元素不重叠。

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

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

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

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

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

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

合并规则：

• 当两个margin都是正数时，取两者之中的较大者
• 当两个margin都是负数时，取两者之间绝对值较大者
• 当两个margin一正一负时，取的是两者的和

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。