浮动定位BFC边距合并

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

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

特征：

1. 块级元素浮动将并排显示，不再独占一行
2. 内联样式浮动将支持设置宽高，不仅支持margin-left(right)，而且开始支持margin-top(bottom)
3. 浮动元素默认内容撑开宽度
4. 浮动元素脱离正常的文档流
5. 浮动元素提升半层级

影响

对父容器： 当元素设置为浮动时，父容器会当做它不存在，此时容易造成塌陷。
其他浮动元素： 如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动 ,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被 卡住。
普通元素： 浮动会让元素脱离普通流, 如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框
文字： 对于文字来说，能感知到浮动元素的存在，如果位置足够，就能够实现文本围绕的效果。
普通元素覆盖和文字围绕demo。

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

清除浮动： 解决浮动父容器高度塌陷问题。

清除浮动方法：
1、最后添加一个空div，对它清理。缺点是增加了一个无意义的标签。 加div。
2、使用clear:both(left,right)。
3、使用BFC清除浮动

  /*方法1*/ ie可用
  .clearfix{
      *zoom:1;
  }


  /*方法2*/ 常用方法，但是ie没有after伪元素

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

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

值	属性	参考点	使用场景
inherit	规定应该从父元素继承 position 属性的值	原始位置	很少用
static	默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）	原始位置	很少用
relative	生成相对定位的元素	相对于元素本身正常位置进行定位。因此，left:20px 会向元素的 left 位置添加20px	当元素需要做少量调整时
absolute	生成绝对定位的元素	相对于static定位以外的第一个祖先元素（offset parent）进行定位。	当需要做页面垂直水平居中时
fixed	生成绝对定位的元素	相对于浏览器窗口进行定位。	当需要在浏览器内做栏目时
sticky	CSS3新属性，表现类似position:relative和position:fixed的合体	在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。	很少用，兼容性差

CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)
1、普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中position: static与position:relative属于普通流的定位方式
2、浮动定位机制
3、绝对定位包括 absolute和 fixed

浮动元素：会对其他浮动元素产生影响，会对普通流元素的文本产生影响
绝对定位：不会

绝对定位宽度： 绝对定位宽度是收缩的，如果想撑满父容器，可以设置 width: 100%
清除浮动： 绝对定位能形成 BFC 可用来清除浮动 可用来阻止外边距合并

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

定义： z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明：
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。Z-index 仅能在定位元素（position:relative/absolute/fixed）上奏效。

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

position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置,类似浮动元素。
margin：除了让元素自身发生偏移还影响其它普通流中的元素。

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

BFC的全称是 Block Format Content，块级格式化上下文。通俗来讲就是BFC是一个隔离的独立容器，容器里面的子元素不会影响到外面的子元素，反之亦然。

如何生成BFC：

一个块格式化上下文由以下之一创建：

1. 根元素或其它包含它的元素
2. 浮动元素 (元素的 float 不是 none)
3. 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
4. 内联块 (元素具有 display: inline-block)
5. 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
6. 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
7. 具有overflow 且值不是 visible 的块元素
8. display: flow-root
9. column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

作用： BFC 特性

1. BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
   按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
   因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠
2. BFC不会重叠浮动元素
3. BFC可以包含浮动。demo

局限性：
使用BFC使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式，这是我们不希望的，display这几种方式依然没有解决低版本IE问题。。。

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

外边距合并： 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的 求和 ，而是两者中的较大者。若都为负时，取绝对值大的。若出现一正一负的现象，则取两者的和。（demo）

image.png

image.png

image.png

清除外边距合并

1. 消除边距合并的方式：形成BFC。但这里要注意的是，在形成BFC的方式中（float的值不为none，display的值为inline-block、table-cell、table-caption）这两个能直接起效果。但（overflow的值为auto或者hidden）这个必须外面还要包裹一层父元素。
2. 父子元素之间的外边据合并
   消除边距合并的方式一：给父元素加边框
   消除边距合并的方式二：给父元素加padding

父子外边距合并的范例

例子

1. alert效果
2. 表单效果
3. 模态框效果
4. 导航栏效果