浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?##
特征：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，因此文档普通流中的块级元素感知不到浮动元素的存在。
对父容器影响：浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘。引起的父元素高度塌陷。
对其他浮动元素的影响：父容器足够宽，与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。
对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。
对文字的影响：文字所在行框（或display：inline-block）因为浮动元素的挤压而缩短，从而围绕浮动元素排列。
清除浮动指什么? 如何清除浮动? 两种以上方法##
子元素浮动引起父元素高度塌陷，因为没有预先设置父元素高度，所以父元素高度由其包含的子元素撑开。而浮动脱离文档流，所以子元素并不会被计算高度。此时的父元素中，相当于父元素中子元素高度为0，所以发生了父元素高度塌陷现象。
清除浮动指：消除浮动元素对其父元素因浮动元素造成的高度塌陷的问题
清理浮动一般有两种思路：
- 设置clear:both能清除浮动，并撑开父元素。
elements:after{ content:''; display:block; clear:both; }
- 使父容器形成BFC
##有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？##
|值|属性
|:---:|:---:|
|inherit|规定应该从父元素继承position属性的值
| static|默认值，没有定位，元素出现在正常的流中（忽略top，bottom，left，right或者z-index声明）
| relative|生成定位的元素，相对于元素本身正常位置进行定位，因此`left:20px`会向元素的left位置添加20px
|absolute|生成绝对定位的元素，相对于`static`定位以外的第一个 祖先元素（`offset parent`）进行定位，元素的位置通过`left`,`top`,`right`以及`bottom`属性进行规定
|fixed|生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过`left`,`top`,`right`以及`bottom`属性进行规定
|sticky|css3新属性，表现类似于`position:relative`,`position:fixed`的合体，在目标区域在屏幕中可见
##z-index 有什么作用? 如何使用?##
z-index 属性指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
对于一个已经定位的元素（即position属性值是非static的元素），z-index 属性指定：
元素在当前堆叠上下文中的堆叠层级。
元素是否创建一个新的本地堆叠上下文
##position:relative和负margin都可以使元素位置发生偏移?二者有什么区别##
position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
margin：除了让元素自身发生偏移还影响其它普通流中的元素。
##BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明##
**定义**
根据w3c规范中的定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
**布局规则**
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边（margin-left）， 与容器的左边缘(border-left)相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
所以通俗的讲，BFC是一个独立的渲染环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。
##哪些元素会生成BFC？##
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
**BFC的特性与作用**
- **BFC会阻止垂直外边距（margin-top、margin-bottom）折叠**
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。
for example
//style
.wrap{width:100px; background:lightblue; margin-top:20px;}
.box1{ width: 50px;height:50px; background:lightpink;margin-top:50px;}
//html
<div class="wrap">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
当我们将父元素设为BFC或者在他们之间加入阻挡（比如设置border），就可以阻止重叠了
.wrap{
width:100px;
background:lightblue;
margin-top:20px;
overflow:hidden;
}
- **BFC不会重叠浮动元素**
for example:
.wrap{ width:250px;background:lightblue; margin-top:20px;}
.box1{width: 50px;height:150px;background:lightpink;float:left;}
.box2{ width:200px;height:200px;background:lightyellow; }
//html
<div class="wrap">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
因为BFC的区域不会与浮动元素重叠，所以我们将.box2生成BFC就可以了。
.box2{
width:200px;
height:200px;
background:lightyellow;
overflow:hidden;
}
- **BFC可以包含浮动（清除浮动）**
.wrap{border:1px solid black;background:lightblue;margin-top:20px;}
.box1{width: 50px;height:150px;background:lightpink;float:left;}
.box2{width:200px; height:200px;background:lightyellow;float:left; }
//html
<div class="wrap">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
由于子元素都是浮动元素，脱离了文档流，所以造成父元素高度塌陷。
因为计算BFC的高度时，浮动元素也参与计算，所以为达到清除内部浮动，我们可以触发wrap生成BFC，那么wrap在计算高度时，par内部的浮动元素child也会参与计算。
.wrap{
border:1px solid black;
background:lightblue;
margin-top:20px;
overflow:hidden;
}
##在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例##
##合并外边距##
在CSS当中，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
**合并的结果**
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
**产生折叠的必备条件：margin必须是邻接的!**
而根据w3c规范，两个margin是邻接的必须满足以下条件：
- 必须是处于常规文档流（非float和绝对定位）的[块级盒子](http://www.w3.org/TR/CSS2/visuren.html#block-- boxes),并且处于同一个[BFC](http://www.w3.org/TR/CSS2/visuren.html#block-formatting)当中。
- 没有线盒，没有空隙（[clearance](http://www.w3.org/TR/CSS2/visuren.html#clearance)，下面会讲到），没有padding和border将他们分隔开
- 都属于垂直方向上相邻的外边距，可以是下面任意一种情况元素的margin-top与其第一个常规文档流的子元素的margin-top
- 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
- height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
- 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
2个相邻元素生成不同的BFC可以避免外边距合并
浮动和绝对定位不与任何元素产生 margin 折叠
inline-block元素与其兄弟元素、子元素和父元素的外边距都不会折叠（包括其父元素和子元素）
##代码##
1.[alert效果](http://js.jirengu.com/kopiwuketo/1/edit?html,css,output)
2.[表单效果](http://js.jirengu.com/heginubiki/1/edit?html,css,output)
3.[模态框效果](http://js.jirengu.com/sodidoliwo/1/edit?html,css,output)
4.[导航栏效果](http://js.jirengu.com/dekucobocu/1/edit?html,css,output)