CSS浮动和定位

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

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

• 对父容器的影响：如果父容器的子元素都是浮动元素，那么父容器会失去高度，在浮动元素之外。视觉上，父容器没有包含住浮动的子元素。
• 其它浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
• 普通元素的影响：普通元素会视浮动元素不见，占据浮动元素原有的位置，但会被浮动元素遮罩。
• 对文字的影响：文字会感知到浮动元素的存在，会留出空间，形成环绕效果。

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

清除浮动是指浮动元素脱离文档流，父元素无法感知浮动元素的容量，如果父元素未设置高度值，父元素高度将无法只由浮动元素撑开，结合clear属性让父元素在视觉上包围浮动元素。清除浮动的方法：

• 在父元素的子元素最后添加一个空div，并对其设置样式：clear:both;
  由于在子元素最后添加了空div，并清除了浮动，因此父容器被撑开，实现了在视觉上包围浮动元素的效果。
• 利用BFC来清除浮动。
  因为BFC可以包含浮动，因此可以让父元素生成一个新的BFC从而包围浮动的子元素。
  可以对父元素设定以下样式之一生成新BFC。
  float: left | right;
  overflow: hidden | auto | scroll;
  display: table-cell | table-caption | inline-block;
  position: absolute | fixed;
• 对父元素结合CSS特性的通用清除浮动方案，其本质还是第1种方法。

after伪类： 元素内部末尾添加内容；
.clearfix{
  *zoom: 1;//用来触发 IE下 haslayout，使元素根据自身内容计算宽高
}
.clearfix:after{
   content: “”; 
   display: block; 
   clear: both;
}

这个方法没有副作用，但是并不是每一个清除浮动都用这种方式，视情况而定

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

有6种定位方式：

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

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

因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，该属性值越高，元素位置越靠上。

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

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

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

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC就是页面上一个隔离出来了的独立容器，容器里面的子元素不会影响到外面的元素。
哪些元素会生成BFC?

• 根元素
• float: left|right
• overflow: hidden|auto|scroll
• display: table-cell|table-caption|inline-block
• position: absolute|fixed
  BFC具有特性：
  1、阻止垂直外边距折叠：因为可以让嵌套的元素分别在不同的BFC就可以阻止它们外边就折叠了。
  2、BFC不会重叠浮动元素
  3、BFC可以包含浮动，可以利用这一条特性来清除浮动，设置父元素为BFC，就可以清除浮动，但是这样做都会有一些负作用，要根据实际情况选择不同的方式。

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

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

• 两个兄弟元素在垂直方向上合并外边距，取较大值进行合并。
• 父子元素间没有阻挡（如：边框、非空内容、padding等）时发生上和/或下外边距合并。

当为parent容器加上边框后，则能正常显示外边距

阻止父子元素外边距合并的办法：形成BFC可以阻止外边柜合并或者元素上加上border或者padding