1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素的特征
（1）浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
（2）浮动元素的外边缘碰到包含框或者另一个浮动元素的框的边缘会停下。
（3）如果包含块儿太窄无法容纳水平排列的多个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住。 - 都会其他元素的影响
（1）对于父元素，浮动元素碰到它的边框会停下，但父元素会无法察觉浮动元素的存在，如果没有其他内容，父元素会产生高度塌陷。
（2）对于普通元素，察觉不到浮动的元素的存在，浮动元素会覆盖普通元素。
（3）对于文字，会察觉到浮动元素的存在，围绕在浮动元素周围。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
- 清除浮动
消除浮动元素对其他元素产生的影响，例如，让父元素高度塌陷，覆盖其他元素 - 清除浮动的方法
（1）使用clear属性
例如，不想让一个元素左边有向左浮动的元素，设置clear：left即可
（2）解决父元素高度塌陷问题
- 插入一个有clear：both的空div标签
原理：设置空div标签左右不允许有浮动元素，div移动至父元素最下方，高度被撑起 - 利用伪元素选择器after插入空内容撑开父容器
代码
.clearfix:after{
content:"";
display:block;
clear:left; /*IE8以后的浏览器的用法*/
}
- 对父元素设置BFC来包含浮动
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- static
默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） - relative
属性：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
参考点：自身，例如，设置position：relative后，添加left：20px，会在元素本身的位置的左边增加20px
使用场景：页面上防止了一个icon，但由于icon裁剪不是很好，没对齐，可以通过relative进行偏移 - absolute
属性：生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定
参考点：距离最近的非static定位祖先元素，如果没有，就逐层网上寻找，直到寻找到html这个根元素为止
使用场景：相对于某一特定元素进行定位时 - fixed
属性：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
参考点：相对于浏览器窗口
使用场景：需要将某个元素固定在窗口中的某个位置时使用 - sticky
属性：CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置
4.z-index 有什么作用? 如何使用?
- 作用：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
- 使用方法：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
代码：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
效果：
z-index效果
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
区别：使用relative是元素偏移时，元素只是形式上发生偏移，但这个元素在文档流中存在的位置并没有改变，与其他元素排列时还是按正常的元素来排列；而对于margin，直接让元素所占的位置发生了变化。
relative偏移
margin偏移
6.BFC 是什么？如何生成 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发生重叠
margin合并
PS：同一个BFC子元素和父元素margin合并
添加padding
说明：添加padding后子元素和父元素的margin不合并，相当于有一个界限将两个margin分开了，不产生合并
-
BFC不会重叠浮动元素
BFC不重叠浮动元素 -
BFC可以包含浮动
未创建BFC元素
BFC包含浮动元素
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
-
场景（处于同一个BFC下）
-
上下兄弟元素外边距合并：当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。如下图，两个色块margin为20px，中间还是20px，出现了合并
margin合并 - 父子外边距合并：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。添加padding后子元素和父元素的margin不合并，相当于有一个界限将两个margin分开了，不产生合并。
margin合并
PS：同一个BFC子元素和父元素margin合并
添加padding
-
如何合并？
1.当两个外边距相邻都是正数，会合并较大值
2.当两个外边距相邻都是负数，会合并绝对值的较大值
3.当两个外边距一正一负，合并两者相加和
