浮动定位BFC边距的合并
1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素的特征是
- 浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。、
- 浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
- 浮动元素后面的内联元素会向此浮动元素的外边距靠齐
-
对父容器的影响
在下图中我们可以看到因为三个父容器的存在会导致的后果就是父容器的高度出现了不可避免的坍缩，不能保证父容器的颜色将三个子元素包裹起来。
在父容器下三个浮动的显示效果图
-
对于其他元素的影响
在下图中我们可以看到如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住。
对于其他元素的影响
-
对于其他浮动元素的影响
在下图中我们可以看到浮动元素脱离普通流，如果浮动元素后面有个文档流中的普通元素，那么这个普通元素的框会表现的浮动元素不存在。
对于其他浮动元素的效果图
-
对于文字的影响
在下图中我们可以看到浮动元素后面的文档流中的元素，这个元素的框会表现的像浮动元素不存在，但是框的文本内容会受到浮动元素影响，会移动以留出空间。
对于文字的影响效果图
2. 清除浮动指什么? 如何清除浮动? 两种以上方法
** 清除浮动指的是解决在子元素浮动的情况下父容器坍缩的问题**
- 清除浮动的办法：
-
如果我们想让父元素在视觉上包围浮动元素可以在父元素最后添加一个空div，
<div style="clear:both;"></div>对它清理,然而这样会导致的后果就是创建了一个空的无意义的div标签。效果图如下图所示：
效果图
-
使父容器生成BFC,因为BFC可以包含浮动，从而达到“清除浮动”效果。
具体的实现过程主要有一下几种方式:
- float为 left|right
- overflow为 hidden|auto|scroll
- display为 table-cell|table-caption|inline-block
- position为 absolute|fixed
然而并不是各种情况都是不存在任何副作用的，经过前辈们的大量实践经验一般的出来的解决结论是副作用较少的是overflow： auto;& overflow: hidden;
下面是为清理浮动的代码方案 仅供参考：
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
3. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
一般来CSS的定位方式主要有四种
-
默认定位（tatic）
其在CSS定位中为默认值，没有定位，元素在正常的流中,top,right,bottom,left和z-index属性无效。 -
相对定位（relative）
生成相对定位的元素，通过top,bottom,left,right的位置相对于其原来位置进行定位。
其中的相对指的是相对于元素在默认流中的位置。元素偏移之后，他本来在默认文档流中占据的位置仍然存在，其紧挨其后的元素的定位依据它本来的位置定位
参考点：元素本身位置
效果图
-
绝对定位（absolute）
生成绝对定位的元素，相对于static定位外的第一个父元素进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。
绝对定位的元素已经脱离了文档流，普通流中其他元素的布局就像绝对元素不存在一样；绝对定位的元素的位置是相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，它的位置就相对于body根元素；绝对定位的框可以覆盖页面的其他元素。
参考点：距离最近的非static元素，否则为body
使用场景：垂直水平居中 -
固定定位（fixed）
质上是一种绝对定位，不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间，且元素的位置在屏幕滚动时不会发生变化。应用于很多网站顶端的固定导航、右下角的固定广告等等。
参考点：浏览器窗口
需要注意的是注意只有position: relative; absolute; fixed;才能设置top left 等的值。
4. z-index 有什么作用? 如何使用?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。如果为正数，则离用户更近，为负数则表示离用户更远。Z-index 仅能在定位元素上奏效。
定义z-index属性，值必须为整数或者是auto。
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？
position:relative和负margin都可以使元素位置发生偏移,二者区别：
二者的区别是
- position:relative相对定位后元素位置发生偏移，只是视觉上显示的位置变化，但是它仍会占据原来的空间，不会影响其他文档流元素。
- 负margin会使元素在文档流中位置发生偏移，会影响周边的元素位置变化
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC的全称是Block Format Content，中文译为块级格式化上下文。
其主要的特性有一下几点：
-
BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠 -
BFC不会重叠浮动元素
-
BFC可以包含浮动
关于如何生成BFC
- float为 left|right
- overflow为 hidden|auto|scroll
- display为 table-cell|table-caption|inline-block
- position为 absolute|fixed
BFC的作用
- 会阻止垂直外边距（margin-top、margin-bottom）折叠
- 清除浮动
7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
当块处于同一个文档流同一个BFC中，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。对于父子元素，容器没有padding和border内部的margin会导致外边距合并。
具体来说就是相邻元素box1和box2的垂直外边距合并，如下例，
效果图
合并规则
- 两个margin都是正值的时候，取两者的最大值；
- 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
- 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后和正 margin 值中最大的 margin 相加。
- 被非空内容、padding、border 或 clear 分隔开。
- 不在一个普通流中或一个BFC中。
- 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）。
父子外边距的效果图如下图所示
初始效果图
解决外边距合并，让父容器设为BFC就可以了。给父容器加入overflow: auto;包裹h1，使得h1的margin内部生效，从而不会margin合并。这样子元素的margin就不会和父元素的margin发生重叠。如下例：
最终效果图
