浮动定位BFC边距合并

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

浮动元素特征：

1. 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
2. 浮动元素后面的内联元素会向此浮动元素的外边距靠齐
3. 浮动元素后面的块级元素的文字会环绕此浮动元素的外边框

对父容器影响：
元素浮动之后，它脱离当前正常文档流，所以它也无法撑开其父元素，造成父元素的塌陷

对其他浮动元素影响：

1. 同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
2. 反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下

对普通元素影响：

1. 如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素
2. 如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列

对文字的影响：
文字会环绕浮动元素排列

---

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

清除浮动指元素的侧边不允许出现浮动元素，从而使得浮动元素的不占据普通文档流空间的使得父元素的高度塌陷问题得到解决，主要通过clear属性实现。

clear:指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动(清除浮动) 在它的下面。clear 属性适用于浮动和非浮动元素。

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致margin collapsing不起作用。

当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

清除浮动方法：

1. 在父容器内添加一个标签，使用clear:both样式：

   ，如下：
   
   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

2. 通过对父容器添加以下样式，形成BFC达到“清浮动”效果，例如：

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

3. 设置浮动包含块的父元素height值。

---

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

| 定位方式 | 实现 | 参考点 |使用场景|
| --- | --- | --- |
| static | 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） |父元素 |普通正常流布局的页面|
| relative | 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px | 元素本身正常位置 |1.元素小范围偏移 2.作为绝对定位子元素的参考点 |
| absolute | 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定 | 相对于static定位以外的第一个祖先元素 |1.小元素的布局，如：按钮的icon |
| fixed | 固定定位，生产绝对定位元素，但不随着滚动条的移动而改变位置 | 浏览器首屏坐标 |回到顶部按钮|
| sticky |CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置 | | | |

---

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

z-index规定了元素在Z轴（距离用户远近）上的顺序，值越大则越靠近用户，表现就是元素在最上面。

z-index仅在设置了position非static属性的元素生效，且z-index的值只能在兄弟元素之间比较。

Z-index默认值为auto,则不建立层叠上下文。设置为0则会建立层叠上下文。

---

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

相对定位和负margin都可以使元素位置发生偏移
区别：

1. position:relative是相对于元素原本的位置进行偏移，偏移之后，原本的元素所占空间依旧保留。
2. 负margin是子元素相对于父元素的内边框进行偏移，偏移之后，原本的元素所占空间不保留。并且偏移之后元素仍处于正常文档流中。

---

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

BFC是什么
BFC是 block formatting context的缩写，意思就是格式化内容文本。创建了一个BFC的元素就是一个独立的盒子，只有block level box可以参与创建BFC，他的内部与外部都不受盒子外的元素的影响。

生成BFC
可以给需要创建BFC的元素添加以下任意属性：
1.float，除了none都可以。
2.overflow，设置为auto，hidden，scroll中的任意一个都可以。
3.position，设置为absolute,fixed都行。
4.display，设置为inline-block，table-cell，table-caption。

BFC的作用：
1.阻止垂直边距的折叠
通过在父元素ct中添加样式(包括border，padding, float等)的方式，使ct生成新的BFC，从而使外边距不合并,如下：

阻止垂直边距折叠.png

2.BFC元素与浮动元素不重叠
在黄色div中添加overflow: hidden; 或 margin:1px; 样式，
原理：可使黄色div生成新的块级格式化上下文（BFC），
BFC不会重叠浮动元素

不重叠浮动元素.png

3. BFC元素可以包含浮动。
   在ct中添加 float:left 或 overfolw:hidden 或 position:absolute 等样式后，可以使ct的div包裹子浮动元素，防止父元素高度塌陷

包含浮动.png

---

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

外边距合并出现的三个场景。

image.png

image.png

同一个BFC，且同处于普通流中的垂直相邻元素外边距合并。
父子元素的外边距合并。
空元素的外边距合并。
合并规则：

两个margin都是正值的时候，取两者的最大值；
当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
所有毗邻的margin要一起参与运算，不能分步进行。
不让相邻元素外边距合并的方法：

被非空内容、padding、border 或 clear 分隔开。
不在一个普通流中或一个BFC中。
margin在垂直方向上不毗邻。
总结：

这些margin都处于普通流中，并在同一个BFC中；
这些margin没有被非空内容、padding、border 或 clear 分隔开；
这些margin在垂直方向上是毗邻的，包括以下几种情况：

• 一个box的top margin与第一个子box的top margin
• 一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height 为auto的情况下
• 一个box的bottom margin与紧接着的下一个box的top margin
• 一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子元素。
  例外的情况
  根元素的外边距不会参与折叠
  不设置任何属性的空span和空div不影响任何布局，可以无视之。

---

代码

http://js.jirengu.com/foxefobugi/1/edit

http://js.jirengu.com/nomavohodu/1/edit?html,css,output

http://js.jirengu.com/fudeciheru/4/edit

http://js.jirengu.com/davacaqipi/2/edit