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

• 浮动元素有什么特征？
  浮动元素会脱离普通流，其他普通流中的元素表现的就像浮动元素不存在一样。
• 对父容器、其他浮动元素、普通元素、文字分别有什么影响?
  • 父容器：对父容器没有影响。浮动元素会受限于父容器的大小，在父容器内进行浮动。但如果父容器的子元素都是浮动元素，那么父容器会失去高度，在浮动元素之外。
  • 其他浮动元素：其他浮动元素会贴着该浮动元素进行浮动。
  • 普通元素：就像浮动元素不存在一样，有可能被该浮动元素覆盖。
  • 文字：环绕浮动元素。

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

2-1. 清除浮动指什么?
若父容器中所有的元素都浮动，那么父容器就会塌陷，这时父容器就没有高度。清除浮动，就是为了解决这个问题。

2-2. 如何清除浮动?
2-2-1. 利用 clear属性，清除浮动。

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

2-2-2. 使父容器形成BFC。

• float= left|right
• overflow= hidden|auto|scroll
• display= table-cell|table-caption|inline-block
• position= absolute|fixed

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

• 普通流：
  static:这是默认的定位方式。
• 相对定位：
  relative：参考点是该元素本身，它是相对于它原来的位置发生变化。如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变。
• 绝对定位：
  absolute：它的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。
  fixed：固定定位是绝对定位的一种，固定定位的元素也不包含在普通文档流中，它的参考点是视口。

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

z-index控制叠放顺序，z-index越高，元素位置越靠上。

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

• position:relative，元素在移动的时候，其在普通流上占据的位置并没有改变，在该元素后面的元素的位置不会因为元素的移动而移动。
• 负margin，元素在移动的时候，在普通流上的位置发生改变，该元素后面的元素的位置也会相应改变。

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

• BFC 是什么？
  BFC的全称是Block Format Content。
• 如何生成 BFC？
  1.float为 left|right
  2.overflow为 hidden|auto|scroll
  3.display为 table-cell|table-caption|inline-block
  4.position为 absolute|fixed
• BFC 有什么作用？
  1.BFC会阻止垂直外边距（margin-top、margin-bottom）折叠，一般是相邻元素和嵌套元素会有这个折叠问题。
  2.BFC不会重叠浮动元素。
  3.BFC可以包含浮动。

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

• 在什么场景下会出现外边距合并？如何合并？
  外边距合并:两个在普通文档流中相邻的元素外边距相遇的时候发生合并。这个相邻可以是父子关系相邻，兄弟关系相邻，或者一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。
  合并的结果： 两个外边距都是正数，取两者之中的较大者；两个外边距都是负数，取两者之间绝对值较大者；当两个外边距一正一负时，取两者的和。
• 如何不让相邻元素外边距合并？
  若不想让相邻元素合并，设置浮动，display：inline-block或使其父元素均形成BFC可防止边距合并（如overflow:hidden）。
• 范例

Paste_Image.png