浮动定位BFC边距合并

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

1. 任何定义为float的元素，都可以设置宽高，并且不会自动换行，有点类似于inline-block（但是从开发者工具中查看，属性变为了为 display: block;）
2. 浮动元素会从普通文档流中脱出，从正常的排列顺序被抽离
3. 设置浮动方向后，元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界

• 对其父元素的影响
  对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷

• 对其兄弟元素（非浮动）的影响

• 如果兄弟元素为 块级元素
  在现代浏览器和IE8+下，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
  需要注意的是，在IE 6、7下则分别都有不同的表现，IE 6、7中，该兄弟元素会紧跟在浮动元素的右侧，并且在IE6中两者之间留有3px的空隙。这就是著名的“IE 3px bug

• 如果如果兄弟元素为 内联元素
  则元素会环绕浮动元素排列

• 对其兄弟元素（浮动）的影响
  当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面，这条浮动的队列和正常的文档流队列也依旧在同一个父元素当中。

• 对文字的影响
  文字会环绕、包裹浮动元素。

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

• 清除浮动指什么
  浮动会让元素脱离文档流，不再影响不浮动的元素，一定程度上，给布局带来了一些副作用，清除浮动，就是为了解决这些副作用

• 如何清除浮动

• 运用clear:both/left/right清除浮动
  可以在浮动元素末尾添加一个空内容带clear样式属性的标签，最常用、最有的方式是添加一个带clear的伪元素

• 触发BFC清除浮动
  清除子元素浮动，父元素也浮动或者绝对定位触发BFC。
  overflow属性值非visiable。
  display成非块级盒子。

• 通用的清理浮动方案
  用CSS代码生成一个具有clear属性的元素

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

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

CSS有三种基本的定位机制：普通流，相对定位和绝对定位

• 普通流
  Static
  普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式

• 相对定位
  Relative
  相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变

• 绝对定位
  Absolute
  绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。可以使用top，bottom，left，right进行位置移动，亦可使用z-index在z轴上面进行移动。当元素为此定位时，如果该元素为内联元素，则会变为块级元素，即可以直接设置其宽和高的值；如果该元素为块级元素，则其宽度会由初始的100%变为auto。
  Fixed
  绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。

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

z-index属性指定2个方面的内容：

1. 元素的堆叠级别。
2. 元素的堆叠上下文。

z-index属性只能够应用在display属性为relative、absolute或fixed的元素上。

z-index属性有3个可能的取值：

|取值| 描述|
|-||
|auto |设置堆叠的级别为0，并且不建立新的堆叠上下文|
|<integer> |设置一个整数堆叠级别，并且建立一个新的堆叠上下文|
|inherit| 设置和父元素相同的堆叠级别，不建立新的堆叠上下文|

• 堆叠级别
  堆叠级别是元素在Z轴上的取值。值越大，堆叠级别越高，堆叠级别高的元素位于堆叠级别低的元素之上，级别越高的元素越接近屏幕的显示平面。

  
  理解CSS Z-INDEX属性作用、使用
  

  如果一个元素没有指定z-index属性，那么它的堆叠级别根据它在文档树中的位置来决定。在文档树中，越后声明的元素堆叠级别越高。

• 默认规则
  z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.

• 从父规则
  如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.

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

• position：relative；只对元素本身有作用，不影响其它的元素的位置
• margin 会影响周围元素的位置

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

BFC(Box Fomatting Context)
Box:
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
Formatting context:
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
CSS2.1 中只有 BFC 和 IFC, CSS3中还增加了 GFC 和 FFC。
BFC 定义:
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则:
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

• 如何生成 BFC
  一个新的BFC可以通过给容器添加任何一个触发BFC的CSS样式，如 overflow: scroll ,overflow: hidden, display: flex , float: left ,或者 display: table来创建。

• display:table 可能会产生一些问题

• overflow:scroll 可能会显示不必要的滚动条

• float:left将会把元素置于容器的左边，其他元素环绕着它

• overflow:hidden将会剪切掉溢出的元素

• BFC 有什么作用

• 清除内部浮动
  我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。

• 垂直margin合并
  在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
  折叠的结果：

  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时，折叠结果是两者的相加的和。

• 创建自适应两栏布局
  当有一个元素浮动靠向一个普通流元素，浮动元素里的文本会自动环绕在普通流元素周围，这时候给普通流元素添加特定样式触发BFC后，文字就不会环绕了。

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

• 相邻元素

  
  相邻元素
  

  当两个元素上下相邻时，上面的下外边距会与下面元素的上外边距会合并。
  如果元素左右相邻呢？一个典型的场景是几个inline-block元素并排显示。 但inline-block元素的外边距是不合并的，它们会保持自己的间隔。

• 父子元素

父子元素

父子元素如果都有上边距，会合并为其中较大的那一个。
当然，只有两个外边距直接相邻时才会合并。如果父元素有内边距（padding）或边框（border），那么它们不会被合并。

• 单个元素

  
  单个元素
  

  如果一个元素没有内容，也没有内边距和边框，那么它的上下外边距也会合并。
  连续相邻的外边距都是可以合并的。 空元素的上下边距合并时，如果紧接着另一个元素的外边距，它们都会合并到一起。

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

• CSS外边距合并的问题及解决措施

1. 设置了的overflow属性的盒模型，则其与子元素之间的垂直margin不会合并，但其与父元素之间、与相邻元素之间的margin会合并。（overflow取值为visible除外）
2. 设置了float属性的盒模型，则其与相邻元素之间、其与父元素之间、其与子元素之间的垂直margin都不会被合并
3. 设置了绝对定位position:absolute的盒模型，则其与相邻元素之间、其与父元素之间、其与子元素之间的垂直margin都不会被合并。（但应注意position:absolute对其后元素的position的影响）
4. 设置了display:inline-block的盒模型，则其与相邻元素之间、其与父元素之间、其与子元素之间的垂直margin都不会被合并。
5. 水平margin不会被合并，垂直margin会被合并
6. 用内层元素的margin通过外层元素的padding代替；
   内层元素透明边框 border:20px solid transparent