浮动定位BFC边距合并

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

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

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

指清除浮动带来的一些副作用
      浮动会让元素脱离文档流，不再影响不浮动的元素（这里不影响是指在文档流里不占位置，后边的元素忽视浮动元素的存在）。实则不然，浮动不再占据文档流的位置，也使浮动元素周围的元素表现的如同浮动元素不存在一样，给布局带来了一些副作用。
- .clear:both 在父元素中添加一个无意义的div，并向其添加样式clear:both清除浮动，使得父容器撑起来
- BFC:利用某些属性清除格式上下文的特质，使父容器形成一个新的BFC.其便具有BFC包含浮动的特质，使高度撑起来。
- .clearfix:{*zoom:1} *表示针对于IE6,7，其原理是使父容器形成一个类似于BFC的特性
- .clearfi:before:{content:""; display:block; clear:both;} 本质是第一个

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

定位方式:

• 相对定位（relative）:相对于元素在文档流中本该在的位置进行定位。 场景是：为绝对定位提供参照点或调整元素的位置
• 绝对定位（absolute)：向上寻找static以外的元素进行相对定位。若找不到则以html为参照物进行定位 。场景：参照某一元素进行定位
• 继承（inherit）从父元素继承其定位
• 固定定位（fixed) 会相对于视窗的位置进行定位，即使页面滚动，仍会停留在原来的位置
• sticky :当目标在可见区域时，其行为类似于relative;在不可见位置时，类似于fixed

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

- 作用:绝对定位元素脱离文档流，因此有时会发生元素的层叠。z-index元素为这些元素设置了层叠顺序;z-index指定了非static元素显示的优先级，z-index较大的那个覆盖在较小的那个元素上
- 使用:对拥有absolute元素的属性使用;

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

- position:relative 是相对于自己本来的位置发生偏移，对其他元素无影响
- mairgin:负值 会影响周围的普通流元素

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

BFC是块级格式化上下文
生成方式：为元素设置以下属性即可：
float:left|right
overflow:hidden|auto|scroll
display:table-cell|table-caption|inline-block
position:absolute|fixed
作用 BFC为元素生成一个独立的空间，外界元素无法对内界元素造成影响
1.margin的重叠。当两个上下相邻的元素发生margin重叠时，让其中一个元素产生一个新的BFC，即可解决
2.清除浮动:BFC元素可以包含浮动

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

外边距合并指的是，块级元素的上外边距和下外边距相遇时有时会合并为单个外边距。

以下三种情况会导致外边距合并：

毗邻兄弟元素：
毗邻的两个兄弟元素之间的外边距会塌陷（当后者被清除浮动时除外），此时两元素之间的外边距为上面元素的下外边距和下面元素的上外边距中的较大值。
块级父元素与其第一个/最后一个子元素：
如果块级父元素中，不存在上边框、上内边距、inline content、清除浮动这四条属性时，那么这个块级元素和其第一个子元素的上边距就挨到了一起，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。类似的，若块级父元素的 margin-bottom
与它的最后一个子元素的margin-bottom之间没有父元素的 border、
padding、inline content、height
、min-height、max-height 分隔时，就会发生 下外边距合并 现象。
空块元素：
如果存在一个空的块级元素，其 border
、padding、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。
父子外边距合并

代码1
代码2
代码3
代码4