浮动定位BFC边距合并

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

浮动的元素会脱离文档流，向左或者向右移动至包含块内边缘或者同样浮动的元素外边缘。

• 对父容器:如果父容器内的元素均设置了浮动，那么他们脱离普通流无法撑起父容器的高度，导致父元素的塌陷。
• 对其它浮动元素：同一父容器内的浮动元素按照设定的方向并排排列，当父元素的宽度不够时，后面的元素会向下移动，直到有足够的空间；如果浮动元素的高度不同，那么有可能挡住移动的路径。
• 对普通元素：无法辨别普通元素，有可能导致覆盖其它普通元素，不会占据其位置。
• 对文字：文字能够识别浮动元素，会围绕浮动元素。

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

清除浮动指的清除浮动元素对当前元素的影响；

1. 在文档中添加一个元素，给他设置一个样式，clear:both;这种方法会在文档的最后产生一个无意义标签。
2. 使用:after 伪元素 消除浮动

   .clearfix:after {
     content: "";
     display: block;
     clear: both;
   }

3. 将父容器变成BFC

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

属性	描述
absolute	绝对定位 根据不为默种定位方式认定位的第一个父元素进行定位
static	默认值 没有定位，元素出现在正常的流中
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位
relative	相对定位。相对于元素本身正常位置进行定位，通过top、bottom、left、right属性来设置偏移量。使用场 景为绝对定位设定参照物或对元素自身位置进行局部调整。
inherit	从父元素继承定位属性
sticky	对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外 时则表现如fixed

css的定位方式基本有四种：普通流，相对定位，绝对定位，固定定位

• 普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。
• 相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变。
• 绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。也可以理解为层级。
• 固定定位是属于绝对定位中的一种。一般使用场景，例如：导航栏，右侧工具栏，底部回到顶部按钮等。它的定位是相对于浏览器的视窗口（viewport）来定的，而其他的绝对定位则是相对于文档（html）定位的。

注：绝对定位，固定定位会脱离文档流

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

z-index 属性指定一个元素的堆叠顺序，在相同定位中，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index有三个属性：

• auto 默认。堆叠顺序与父元素相等。
• number设置元素的堆叠顺序。
• inherit规定应该从父元素继承 z-index 属性的值。

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

position:relative和负margin都可以使元素位置发生偏移，二者的区别表现在：

• margin会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间。
• 相对定位后元素位置发生偏移，它仍会坚守原来占据的空间，不会让文档流的其他元素流入。

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

BFC(Block formatting context)直译为"块级格式化上下文",使元素形成独立的与其他块隔离的容器，确保内部元素的属性不会影响到外部其它元素。

生成BFC的元素属性如下：

• float 除了none以外的值
• overflow 除了visible 以外的值（hidden，auto，scroll ）
• display (table-cell，table-caption，inline-block, flex, inline-flex)
• position值为（absolute，fixed）
• fieldset元素

BFC的作用：

1. 清除内部浮动

   
   Paste_Image.png
   

   2.防止垂直 margin 重叠

   
   Paste_Image.png

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

当两个垂直外边距（margin）相遇时，将形成一个外边距合并，合并后的高度以这两个外边距中高度值较大值为准。

外边距合并：

• 相邻的同胞元素

  
  Paste_Image.png
  

  把相邻元素设置成BFC可以不让相邻元素外边距合并

• 父元素与子元素（在父元素没有边框，padding等的情况下，子元素与父元素的垂直外边距会发生合并）

  
  Paste_Image.png
  

  阻止父子外边距合并如下：

• 将父元素生成一个新的BFC,
• 给父元素加上一个边框或者padding等.

• 当元素外边距为负值时，元素会往该反向移动多少距离（例如上部外边距为10px,就会往上移动10px），当2个元素的外边距之和小于0时，外边距为负值的元素会覆盖其他元素，对其他元素产生影响；当2个元素的外边距之和为正数时，即为这2个元素之间的外边距。

Paste_Image.png