浮动定位BFC边距合并

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

• 浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.

• 对父元素的影响：浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘。引起的父元素高度塌陷。
• 对其他浮动元素的影响：
  a.父容器足够宽，与其他浮动元素同一水平方向依次排列。
  b.父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动,直到有足够的空间
  c.如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。
• 对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。
• 对文元素的影响：浮动会让元素脱离普通流, 如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间。用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。

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

清除浮动：用于解决浮动父容器高度塌陷问题
清除浮动方法：
1.添加新的元素 并应用 clear：both. *缺点是增加了一个无意义的标签
2.使父容器形成BFC
(如：float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed)*有局限性

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

|值 |定位实现方式|参考点|适用场景|
|---|---|
|inherit |规定从父元素继承 position 属性的值|||
|static |默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）|||
|relative |相对定位，元素的位置通过 left, top, right 以及 bottom 属性进行规定|相对于元素本身正常位置进行定位|一般作为绝对定位的元素参考点|
|absolute| 绝对定位，元素的位置通过 left, top, right 以及 bottom 属性进行规定|相对于static定位以外的第一个祖先元素（offset parent）进行定位|元素的水平垂直居中|
|fixed| 绝对定位，元素的位置通过 left, top, right 以及 bottom 属性进行规定|相对于浏览器窗口进行定位，不随滚动条的滚动而移动|飘窗、固定导航等|
|sticky |CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置||||

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

• z-index 指定元素z-轴的堆叠顺序。因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

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

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

• position:relative，元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素在文档流中的布局。

• 负margin，元素的显示位置和在文档流中的位置均发生变化，会影响后面元素在文档流中的位置。

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

• 概念：BFC为块格式化上下文（block formatting context）
  BFC中的元素的布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

• 如何生成 BFC： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）
• BFC 作用：
  （1） 解决margin重叠问题：对于相邻元素，让他们不在同一个BFC；对于嵌套元素只要把父元素设为BFC就可以了。
  （2）清除浮动。BFC不会重叠浮动元素。

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

• 出现外边距合并场景及合并情况：
  1.相邻的兄弟姐妹元素毗邻的两个兄弟元素之间的外边距会塌陷，前一个元素的下边距和后一个元素的上边距合并，均为正数取其中的较大值，均为负数取其中的较小值，有正有负运算后的值正常偏移。
  2.块级父元素与其第一个/最后一个子元素
  如果块级父元素中，不存在上边框、上填充
  、inline content、清除浮动这四条属性（对于上边框和上内补，也可以说，当上边距及上内补宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距合并 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top，均为正数取其中的较大值，均为负数取其中的较小值，有正有负运算后的值正常偏移。
  类似的，若块级父元素的 margin-bottom与它的最后一个子元素的margin-bottom之间没有父元素的 border、padding、inline content、height、min-height、max-height分隔时，就会发生 下外边距合并 现象。
  3.空块元素
  如果存在一个空的块级元素，其 border、padding、inline content、height
  、min-height都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并

• 解决合并方法
  对于相邻元素，让他们不在同一个BFC；对于嵌套元素只要把父元素设为BFC就可以了。

解决margin重叠问题举例.png