-
浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素会从普通流中取出，浮动到左边或右边（取决于float属性的值），当碰到包含框或者其他浮动元素时，就会停下；
对父容器的影响：如果父容器里只有一个元素，当这个元素浮动时，父容器高度会坍塌，表现为父容器高度变为0，因为浮动元素从正常流中取出，父容器感受不到元素存在。
对浮动元素的影响：浮动元素碰到浮动元素时会停止浮动，排列在前一个浮动元素后，如果宽度足够，则在一行放下，否则转到下行；如果多个元素浮动排列并转行，且元素高度不一样，有可能会被卡住：
（黄色方块转行时被卡住）
对普通元素、文字的影响：浮动元素会放在块元素的上面，不会影响页面的普通流，就好像浮动元素不存在。文本内容会考虑浮动元素的边界，围绕着浮动元素。
-
清除浮动指什么? 如何清除浮动? 使用两种以上方法。
当我们使用float浮动元素实现某些布局时，这些浮动的元素会影响普通流中其他元素的布局，产生许多的副作用（如父元素高度塌陷、浮动元素覆盖后面的块元素等）为了消除这些影副作用，就要清除浮动。
方法1：使用clear属性。
在父容器的最后加一个空div，添加clear属性：
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
<div style="clear:both;"></div>
</div>
缺点是添加了一个无意义的标签，结构混乱。
方法2：创建BFC清理浮动
对父容器添加一些css属性，使之成为BFC，包含浮动元素：
float：left|right
overflow： hidden|auto|scroll
display：table-cell|table-caption|inline-block
position：absolute|fixed
但是使用这些属性，会不同程度的对父容器作出改变，可能会造成一些麻烦（如overflow：hidden会使转行内容隐藏，position改变了元素定位方式，float会使祖父容器坍塌等等），这是BFC清除浮动的局限性。
方法3：通用方法
.clearfix{
*zoom:1;
}
.clearfix:after{
content:""; /*在元素后生成内容*/
display:block;/*定义为块*/
clear:left;/*清除浮动*/
}
本质上也是在元素后生成一个内容来清除浮动，但其语义和结构恰当。
-
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
position属性可以对元素进行定位，有5个值：static（静态）、absolute（绝对）、fixed（固定），relative（相对）、inherit（根据父元素设置）。
static：静态定位是默认方式，将元素放在页面的普通流中；
absolute：绝对定位，允许元素放在页面的任何位置，默认的，绝对定位元素会相对于页面边界来放置。如果一个绝对定位元素嵌套在另一个定位元素（除static定位以外第一个父元素）中，则这个元素就会相对于外包含元素进行定位；
fixed：固定定位元素是相对浏览器窗口定位的，页面滚动时，固定定位的元素不会移动，页面的其他内容会在固定定位元素下面正常滚动；
relative：相对定位元素会先按照普通流流入页面，然后按指定的量进行偏移，但是原先所在的空间并不会消失。
如果你想让内容保持在一个位置不不随着页面滚动，可以选择fixed定位（如回到顶部按钮）；
如果内容位置与计划中的有少许差别，可使用relative定位（如icon摆放位置不对）；
如果想元素单独拿出来摆放位置，则可以使用absolute定位，注意该元素会从普通流中删除，覆盖普通流中的元素。
-
z-index 有什么作用？如何使用？
绝对定位的元素可以使用z-index属性分层放置，使一个元素放在另一个元素上面。z-index值越大，说明层次越高（在屏幕上表现就是离你越近）。
-
position:relative和负margin都可以使元素位置发生偏移，二者有什么区别？
position:relative相对自身普通流中的位置移动，不影响周围元素的位置，表现为元素发生了移动，但原本位置还有，普通流没有发生变化：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style type="text/css">
.box1,.box2,.box3 {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: yellow;
position: relative;
top: 50px; /*黄块向下移动50px（距离原本位置上边50px） */
}
.box3 {
background-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
</body>
</html>
在负margin中，元素不但自身发生了移动，和它相邻的元素也发生了位置的变动，普通流发生变化：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style type="text/css">
.box1,.box2,.box3 {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: yellow;
margin-top: -50px; /*黄块向上移动了50px，绿块也向上移动*/
}
.box3 {
background-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
</body>
</html>
-
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明。
BFC全称Block Format Content（块级格式上下文），对于浮动元素、绝对定位元素，块容器（如inline-block、table-cells、table-captions等等）等元素，会创建一个新的BFC，在BFC中有一些规则，如块元素占据一整行，边距合并等，在同一个BFC的的元素都要遵守这些规则。2个BFC之间互不干扰。
如何形成BFC？
1.f将一个元素变为浮动元素，则它自己则创建了一个BFC；
2.添加overflow属性为hidden|auto|scroll；
3.将元素display为table-cell|table-caption|inline-block；
4.将元素进行absolute定位或fixed定位。
因为BFC可以包含浮动，所以可以通过创建BFC来清除浮动：
<title>JS Bin</title>
<style type="text/css">
.text {
border: 3px solid;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="text">
<div class="box1"></div>
</div
box1未浮动：
添加浮动后，父容器box高度坍塌：
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left; /*左浮动*/
}
把父容器创建为BFC后，恢复正常：
.text {
border: 3px solid;
overflow: hidden; /*添加overflow: hidden属性，创建为BFC*/
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
BCF还可以用来解决两个元素margin折叠的问题，因为BFC互不干扰。
-
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。
普通流中两个块元素上下相邻的外边会发生折叠，折叠为最大的外边距的大小，或者如果两个外边距大小相同，则会折叠为一个外边距。详见：
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并：
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并：
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
如何不让相邻元素合并？1.创建BFC，2个BFC之间互不干扰；2.设置border和padding，阻止margin直接接触。
父子合并示例：
添加边框阻止了合并
去掉边框发生合并
当出现正负的情况时，外边距的叠加采用代数叠加，如下所示，子元素margin-top为-100px，父元素margin-top为100px，叠加后为0：
