浮动定位BFC边距合并

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

特征：

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

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

• 清除浮动
  清除掉元素float属性。
• 如何清除浮动?
  clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。不要在浮动元素上清除浮动。
• 清除浮动方法
  1. 利用 clear属性，清除浮动
  2. 使父容器形成BFC

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

• **方法2**
     .clearfix{
          *zoom:1;
       }
      .clearfix:after{
          content:"";
          display:table;
          clear:both;
       }
  

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

• CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)
• 普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中position: static与position:relative属于普通流的定位方式;
• 浮动定位定位机制;
• 绝对定位包括 absolute和 fixed
  通过使用position属性，选择不同的定位方式：

值	描述
inherit	规定应该从父元素继承 position 属性的值。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

• absolute, relative, fixed偏移的参考点分别是什么？
  absolute, relative, fixed偏移的参考点实际就是他们的定义上下文。

1. absolute的定位
   浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。
2. relative的定位
   relative元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。
3. fixed的定位
   fixed元素的定位永远是相对于浏览器边界的，和其他元素没有关系。

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

z-index属性设置一个定位元素沿Z轴的位置，Z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
当网页上出现多个由绝对定位（POSITION:absolute）或固定定位（POSITION:fixed）所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置[z-index]的值来解决，这个值较大的就在上面，较小的在下面。
使用：

z-index值为-1.jpg

文字在div区域的上方。

z-index的值为1.jpg

div区域在文字的上方。

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

• position：relative可以使元素发生偏移，但是在文档流中，它仍然占据着原来的位置，所以其他元素的位置不会发生变化。
  relative.jpg
• 负margin：通过负margin进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间，所以其他元素的位置发生了变化。

-margin.jpg

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

BFC全称为块级格式化上下文（Block Format Content）.存在IE低版本不兼容的问题。
生成条件：

• float: left/right
• overflow: hidden/auto/scroll
• display: table-cell/inline-block/table-caption
• position: absolute/fixed
  作用:
• BFC会阻止垂直外边距的折叠
  只有同属一个BFC时，两个元素才有可能发生垂直Margin的重叠
• BFC不会重叠浮动元素
• BFC可以包含浮动（利用此条特性来“清除浮动”，也就是说对父容器添加这些属性形成
  BFC）

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

外边距合并

• 两个元素上下排列，上面的元素有margin-bottom，下面的元素有margin-top
• 父元素有margin-top/bottom同时子元素也有
• 空元素同时有margin-top/bottom其上下margin会合并
  合并
• 相邻元素间上下外边距取margin值大的那个
• 父子元素外边距合并会让父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
• 当元素为空元素时，元素的上下margin会合并，并且多个兄弟（父子）空元素的外边距会合并成一个，最终展现出来的外边距会是多个外边距中较大的那个，如果当中有负margin的存在时，合并后的外边距将是最大正边距加上最小负边距
  如何不让相邻元素外边距合并
• 设置浮动；
• 设置为display：inline-block；
• 使其父元素各形成BFC；
  父子外边距合并的范例
  父子元素边距合并.jpg
  取消父子元素边距合并.jpg