1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征
- 浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘时停下
影响
- 对父容器：如果父元素中的子元素都为浮动元素，而且父元素没有设置高度，那么父元素的高度会发生坍塌
- 对其他浮动元素：如果包含块儿太窄无法容纳水平排列的全部浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住
- 对其他普通元素：普通元素无法感知浮动元素的存在，会占据原来浮动元素的位置，但会被浮动元素遮盖。
- 对文字的影响：文字能识别到浮动元素的存在，会移动以留出空间，会出现文字围绕浮动元素的现象
2.清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动
- 元素的侧边不允许出现浮动元素，解决不设置高度的父容器塌陷的问题
如何清除浮动
- 利用clear属性清除浮动
- 在浮动元素的最后添加一个空标签，利用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>
效果：
清除浮动1.png
- 利用BFC清理浮动
- 利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成BFC就可以
- 如何形成BFC
- float为 left|right
- overflow为 hidden|auto|scroll（即非visible）
- display为 table-cell|table-caption|inline-block
- position为 absolute|fixed
- 通用的清理浮动法案（after伪元素清除浮动 ）
/*方法1*/
.clearfix{
*zoom:1; /*针对ie 6 7，利用hasLayout属性 */
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/*用after在浮动元素最后添加一个伪元素，再利用clear属性清除浮动，类似方法1，不需要添加无意义的html标签*/
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
六种定位方式
| 值 | 属性 |
|---|---|
| inherit | 规定应该从父元素继承 position 属性的值 |
| static | 默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） |
| relative | 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px |
| absolute | 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）(的内边框)进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定.不设置top等属性时，元素会贴着父元素的padding，所以最好用时候都设置一下 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定 |
| sticky | CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置 |
4.z-index 有什么作用? 如何使用?
- 因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
- z-index规定了元素在Z轴（距离用户远近）上的顺序，值越大离用户越近、越在上层。
- z-index仅在设置了position非static属性的元素生效(适用于浮动元素)，且z-index的值只能在兄弟元素之间比较。
- Z-index默认值为auto, 不建立层叠上下文。设置为0则会建立层叠上下文。
张鑫旭博客参考
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- posotion: relative 只相对于自己原本位置发生偏移，不影响其他普通流中元素的位置。
- 负margin 除了让元素自身发生偏移还会影响其他普通流中的元素
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC( Block Format Content)，块级格式化上下文
- 如何生成BFC
- float为 left|right
- overflow为 hidden|auto|scroll（即非visible）
- display为 table-cell|table-caption|inline-block
- position为 absolute|fixed
- 作用
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
- BFC不会重叠浮动元素
- BFC可以包含浮动（清除浮动）
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 外边距合并的三个场景：
- 同一个BFC中，且同属于普通流中的垂直相邻元素外边距合并。
- 父子外边距合并。
- 空元素外边距合并。
- 合并规则：
- margin都是正值的时候，取两者之间的较大值。
- margin都是负值时，取绝对值较大的值。
- margin有正值有负值的时候，先取出负margin中绝对值较大的，然后和正margin最大值相加。
- 所有毗邻的margin一起参与运算，不能分布进行。
- 不让相邻元素外边距合并的方法：
- 被非空内容、padding、border和或clear分隔开。
- 不在一个普通流中或BFC中。
- margin在垂直方向上不相邻。
不让父子元素外边距合并的方法：
- 子元素和父元素的兄弟元素之间被非空内容如padding、border分隔开，即为父元素添加非空内容、padding、border。
- 父元素display为 inline-block、table、flex
- 父元素overflow为hidden
