浮动和定位

浮动元素有什么特征？

浮动元素不在文档的普通流中，它可以根据float属性值而左右移动，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘才停止移动。

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

1、对其父元素的影响:

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

2、其它浮动元素的影响：

如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。

3、普通元素的影响：

普通元素会视浮动元素不见，占据浮动元素原有的位置，但会被浮动元素遮罩。

4、对文字的影响：

文字会感知到浮动元素的存在，会留出空间，形成环绕效果。

清除浮动指什么?

清除浮动指：消除浮动元素对其父元素因浮动元素造成的高度塌陷的问题

如何清除浮动?

方法一：添加空div ,应用 clear：both属性
方法二: 应用:after

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

方法三:使父容器形成BFC

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

• CSS有三种基本的定位机制：普通流，相对定位和绝对定位

普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式

相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变

绝对定位与固定定位相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样

1.inherit 规定应该从父元素继承 position 属性的值
2.static 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
3.relative 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px会向元素的 left 位置添加20px
4.absolute 绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right以及 bottom 属性进行规定
5.fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
6.sticky CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置

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

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

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

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

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

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

BFC 是什么？如何生成 BFC？BFC 有什么作用？

BFC是块级格式上下文。其定义是：浮动、绝对定位（绝对定位、固定定位）元素、块级容器（如inline-block、 table-cell、table-caption）并不是块级盒子，还包括哪些overflow属性值取值visible以外的块级盒子，会为它们的内容物创建一个新的块级格式化上下文。对元素设置以下属性就可以生成BFC：
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;

BFC的作用有：

1、解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
2、清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。

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

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

• 同一个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不影响任何布局，可以无视之。
  

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。