CSS-浮动定位BFC边距合并

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

特征

• 浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘时停下

影响

• 对父容器：如果父元素中的子元素都为浮动元素，而且父元素没有设置高度，那么父元素的高度会发生坍塌
• 对其他浮动元素：如果包含块儿太窄无法容纳水平排列的全部浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住
• 对其他普通元素：普通元素无法感知浮动元素的存在，会占据原来浮动元素的位置，但会被浮动元素遮盖。
• 对文字的影响：文字能识别到浮动元素的存在，会移动以留出空间，会出现文字围绕浮动元素的现象

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

清除浮动

• 元素的侧边不允许出现浮动元素，解决不设置高度的父容器塌陷的问题

如何清除浮动

1. 利用clear属性清除浮动

• 在浮动元素的最后添加一个空标签，利用clear属性进行清除浮动,撑开父容器。该方法的缺点是增加了一个无意义（语义）的标签。如：

效果：

清除浮动1.png

2. 利用BFC清理浮动
   • 利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成BFC就可以
   • 如何形成BFC
     • float为 left|right
     • overflow为 hidden|auto|scroll（即非visible）
     • display为 table-cell|table-caption|inline-block
     • position为 absolute|fixed
3. 通用的清理浮动法案（after伪元素清除浮动 ）

/*方法1*/
  .clearfix{
      *zoom:1;          /*针对ie 6 7，利用hasLayout属性 */
  }
  .clearfix:after{
      content:"";    
      display:block;
      clear:left;
  } 
  /*用after在浮动元素最后添加一个伪元素，再利用clear属性清除浮动，类似方法1，不需要添加无意义的html标签*/ 

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

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

六种定位方式

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

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

• 因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
• z-index规定了元素在Z轴（距离用户远近）上的顺序，值越大离用户越近、越在上层。
• z-index仅在设置了position非static属性的元素生效(适用于浮动元素)，且z-index的值只能在兄弟元素之间比较。
• Z-index默认值为auto, 不建立层叠上下文。设置为0则会建立层叠上下文。

张鑫旭博客参考

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

• posotion: relative 只相对于自己原本位置发生偏移，不影响其他普通流中元素的位置。
• 负margin 除了让元素自身发生偏移还会影响其他普通流中的元素

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

• BFC( Block Format Content)，块级格式化上下文
• 如何生成BFC
  • float为 left|right
  • overflow为 hidden|auto|scroll（即非visible）
  • display为 table-cell|table-caption|inline-block
  • position为 absolute|fixed
• 作用
  1. BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
  2. BFC不会重叠浮动元素
  3. BFC可以包含浮动（清除浮动）

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

• 外边距合并的三个场景：
  1. 同一个BFC中，且同属于普通流中的垂直相邻元素外边距合并。
  2. 父子外边距合并。
  3. 空元素外边距合并。
• 合并规则：
  1. margin都是正值的时候，取两者之间的较大值。
  2. margin都是负值时，取绝对值较大的值。
  3. margin有正值有负值的时候，先取出负margin中绝对值较大的，然后和正margin最大值相加。
  4. 所有毗邻的margin一起参与运算，不能分布进行。
• 不让相邻元素外边距合并的方法：

1. 被非空内容、padding、border和或clear分隔开。
2. 不在一个普通流中或BFC中。
3. margin在垂直方向上不相邻。

• 父子外边距合并

• 不让父子元素外边距合并的方法：

1. 子元素和父元素的兄弟元素之间被非空内容如padding、border分隔开，即为父元素添加非空内容、padding、border。
2. 父元素display为 inline-block、table、flex
3. 父元素overflow为hidden