浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素的特征：
- 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
- 浮动元素后面的块级元素的内容会向浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个非浮动元素靠齐
- 浮动元素后面的内联元素会向此浮动元素的外边距靠齐
浮动元素的影响：
1.对其父元素的影响
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷
- 对其兄弟元素（非浮动）的影响
- 如果兄弟元素为块级元素，该元素会忽视浮动元素而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层次位置），但它的内部文字和其他行内元素都会环绕浮动元素。
- 如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
- 对其兄弟元素（浮动）的影响
- 同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们的后面
- 反方向的浮动元素：互不影响，位于同一水平线上，当空间不够时会被挤下
- 对子元素的影响
当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
清除浮动指什么? 如何清除浮动? 两种以上方法
解决浮动父容器高度塌陷问题
- 父元素的最后设置 clear:both;（当添加了最后一个冗余元素（未设置clear:both）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both，它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。）
- 伪类:after写入空白元素来清
.fix::after {
content:"";
display:table;
clear:both;
}
- 给父元素添加overflow:hidden
创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。它具有以下特征：
1.内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
3.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box叠加。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6.计算BFC的高度时，浮动元素也参与计算。
- 浮动 (元素的 float不为 none）
- 绝对定位元素 (元素的 position为 absolute 或 fixed)
- 行内块 inline-blocks (元素的 display: inline-block)
- 表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素的 display: table-caption，HTML表格标题默认属性)
- overflow的值不为 visible的元素
- 弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- relative生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
- static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
这个熟悉了就知道用哪个了，比如有些div悬浮在上方，可能就需要fixed，也就是滚动条移动时不会改变与浏览器的位子，relative可能就要相对于父结点进行定位了一般都是相对定位的
z-index 有什么作用? 如何使用?
z-index就是网页的z轴，用相对定位绝对定位把两个层重叠在一起，z-index的值越大，就越靠上。
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可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
（1）两个兄弟元素在垂直方向上合并外边距，取较大值进行合并。
#box1 {
width:100px;
height:100px;
margin-bottom:20px;
}
#box2 {
width:100px;
height:100px;
margin-top:10px;
}
<div id="box1">
</div>
<div id="box2">
</div>
这时两个div在垂直距离上的外边距进行了合并，合并后的值是20px。
（2）父子元素间没有阻挡（如：边框、非空内容、padding等）时发生上和/或下外边距合并。
例：
<div class=”parent”>
<div class=”child”>
</div>
</div>
.parent{
width: 200px;
height: 100px;
margin-top:10px;
background-color: red;
}
.child{
width: 100px;
height: 100px;
margin-top:30px;
background-color: yellow;
}
这时就会发生合并。合并后的外边距是30px。
（3）外边距自己和自己合并
如果一个元素没有边框和填充，但有上下外边距，这时它的上下外边距会合并。例：
#box1 {
margin-top:50px;
margin-bottom:20px;
}
<div id="box1">
</div>
这时上下外边距合并成50px。
除此之外，若该元素垂直方向上的兄弟元素也有外边距，那么垂直方向的外边距依旧会发生合并。例：
#d1 {
margin-top:50px;
margin-bottom:20px;
}
#d2 {
width:100px;
height:100px;
margin-bottom: 80px;
}
<div id="d2">
</div>
<div id="d1">
</div>
这时，外边距合并成80px。
