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

---

特征：

• 元素浮动之后不占据原来的位置。
• 浮动的盒子在一行上显示。
• 行内元素浮动之后转换为具备有块级元素的特征，可以设置宽高

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

• 如果父容器的子元素都是浮动元素，如果父容器没有定义高度，那么父容器会失去高度，在浮动元素之外。
• 对于普通元素，普通元素会感知不到浮动元素的存在，如果宽高合适，后面的元素会占据浮动元素原来的位置。
• 对于文字来说，能感知到浮动元素的存在，如果位置足够，就能够实现文本绕图的效果。

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

---

清除浮动指什么：

• 当使用浮动元素时，会产生各种问题：
  1.使用浮动元素会导致文字包围浮动元素的情况；
  2.父元素无法感知浮动元素的容量，如果父元素未设置高度值，父元素高度将无法只由浮动元素撑开,可能会出现父容器高度为0的现象。为了解决这些问题，需要清除浮动。

如何清除浮动:

• 针对文字包围浮动元素的情况，可以使用clear属性来清除浮动
• 针对使用浮动元素后父容器出现的高度问题，利用某些属性清除格式上下文的特质，使父容器形成一个新的BFC.其便具有BFC包含浮动的特质，使高度撑起来。
• 浮动元素脱离文档流
  父级div定义 height ：
  原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
  优点：简单、代码少、容易掌握
  缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
  建议：不推荐使用，只建议高度固定的布局时使用

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

---

• inherit：继承父元素定位属性。
• static：默认值，没有定位，元素出现在正常的文档流中。参考点是文档流中的位置。
• relative：相对定位。相对于元素本身正常位置进行定位，通过top、bottom、left、right属性来设置偏移量。使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整。
• absolute：绝对定位。相对于static定位除外的第一个祖先元素进行定位，若都没有发现则以html标签为参考进行定位。使用场景：当想让元素参照特定参照物进行定位时使用。
• fixed：固定定位。生成绝对定位元素，相对于viewport进行定位。
• sticky：对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。兼容性不佳，不常用。

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

---

• 作用:绝对定位元素脱离文档流，因此有时会发生元素的层叠。z-index元素为这些元素设置了层叠顺序
• 使用:对拥有absolute元素的属性使用

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

---

• position:relative 是相对于自己本来的位置发生偏移，对其他元素无影响
• mairgin:负值 会影响周围的普通流元素

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

---

• BFC是块级格式化上下文
• 生成方式：为元素设置以下属性即可：
  float:left|right
  overflow:hidden|auto|scroll
  display:table-cell|table-caption|inline-block
  position:absolute|fixed
• 作用 BFC为元素生成一个独立的空间，外界元素无法对内界元素造成影响
  1.margin的重叠。当两个上下相邻的元素发生margin重叠时，让其中一个元素产生一个新的BFC，即可解决
  2.清除浮动:BFC元素可以包含浮动

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

---

• 会出现外边距合并的情况：
  两个在普通文档流中相邻的元素外边距相遇的时候发生合并。这个相邻可以是父子关系相邻，兄弟关系相邻，或者一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。
• 合并规则：
  1、两个外边距都是正数，取两者之中的较大者；
  2、两个外边距都是负数，取两者之间绝对值较大者；
  3、当两个外边距一正一负时，取两者的和。
• 取消相邻元素的外边距合并：
  1、可以选择使用同一方向上的margin设定，比如都设置margin-top或者统一设置margin-bottom。
  2、给元素加一个display:inline-block;(只针对当前加的元素起效)
  3、给元素添加folat, position等

• 父子外边距合并范例：

  
  8D1AC4FA-B269-4687-BA53-19A365E14D0E.png

父元素加上overflow:hidden;

AEAC962A-B970-4BC8-96A1-85B6FC06FEE0.png