css浮动、定位

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

特征：
· 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示。
· 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐。
· 浮动元素后面的内联元素会向此浮动元素的外边距靠齐。

影响：
· 浮动元素会脱离普通文档流，所以无法撑开父容器(非BFC父元素)，会造成父容器高度塌陷。
· 其他相同方向的浮动元素会察觉到浮动元素的存在，然后按照从左到右类似“普通文档流”的顺序排列。和反方向的浮动元素互不影响，位于同一条水平线上，当空间不够时会被挤下。
· 普通元素会无视浮动元素的存在，从而占据浮动元素浮动前的位置。
· 文字会环绕浮动元素排列。

---

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

清除浮动是指清除掉元素float属性

清除浮动的方法:

1. 添加新的元素 、应用 clear：both；

.clear{
  clear:both;
  height: 0; 
  line-height: 0;
  font-size: 0
}

    
1
    
2
    
3
    

2. div:after 方法：（注意：作用于浮动元素的父亲）

.outer{
    content:"";
    display:block;
    clear:both;
  }

3.使浮动元素的父容器变成BFC,父级div定义 overflow: auto等

.over-flow{
    overflow: auto;
    zoom: 1; //zoom: 1; 是在处理ie6兼容性问题
}
 //这里添加了一个class
    
1
    
2
    
3
    

---

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

inherit：规定应该从父元素继承 position 属性的值。
static：默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适合，取得相对较好的布局效果。left,top属性对static没有效果，static是靠margin这些定位的。
relative：生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px。
相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。
absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定。
如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。
如果没有父元素，位置是相对于body来进行的。
绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。
fixed定位的参照物总是当前的文档。利用fixed定位，我们很容易让一个div定位在浏览器文档的左上，右上等方位。
sticky：CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。
兼容性较差，一般用JS实现。

---

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

• z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
• 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
• z-index仅在设置了position非static属性的元素生效，且z-index的值只能在兄弟元素之间比较。
• z-index默认值为auto,则不建立层叠上下文。设置为其他数值则会建立层叠上下文。

---

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

position:relative和负margin都可以使元素位置发生偏移

position:relative 相对于元素本身正常位置进行偏移，普通文档流中的位置仍然保留，即原来位置会留有空白，
不影响周围其他元素的布局。
负margin产生的偏移会影响周围其他普通流中的元素的布局

---

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

·BFC的全称是 [Block Format Content]"块级格式化上下文"
·对父容器添加这些属性来生成BFC

浮动 float为 left | right
overflow为 hidden | auto | scroll
display为 table-cell | table-caption | inline-block
绝对定位position为 absolute | fixed
根元素

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

---

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

合并场景：当一个元素出现在另一个元素上面时，第一个元素的底外边距与第二个元素的顶外边距会合并
当一个元素包含在另一个元素中时(假设没有内边距或边框将外边距分隔开)，它们的顶和/或底外边距会合并
当一个空元素有外边距，但没有边框或内边距时，它的顶外边距和底外边距会发生合并，如果空元素与另一个非空元素相邻，它们的外边距仍然会发生合并。
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框，浮动框或者绝对定位框之间的外边距不会发生合并。
如何合并：两个margin都是正值的时候，取两者的最大值；
当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
所有毗邻的margin要一起参与运算，不能分步进行。
禁止合并：被非空内容、padding、border 或 clear 分隔开。
不在一个普通流中或一个BFC中。
margin在垂直方向上不相邻。
范例：

---