1.1 浮动元素的特征
1.1.1 浮动元素可以左右浮动，直至它的边缘碰到所在容器的边缘或是另一个浮动元素边缘；
1.1.2. 浮动元素的父容器会得不到它的高度；
1.1.3. 浮动元素脱离文档的普通流，其他元素会忽视它，但文本（注意，不是一连串没空格的字符）可以围绕它；
1.1.4. 浮动元素会改变行内元素display属性为block，即可以设置宽高，边距等。
1.2 浮动元素对父容器、其他浮动元素、普通元素、文字分别的影响?
1.2.1 如1.1.2所述，如果父容器中浮动元素，那么父容器因为得不到它的高度而是自身高度塌陷；
1.2.2 其他浮动元素会按照顺序依次排列，直至父容器宽度不够进行换行；
1.2.3 其他元素会忽视浮动元素，文字会围绕浮动元素。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
1.父容器末尾加块级元素应用clear:both撑开父容器;
2.父容器末尾添加伪元素，将其设置为块级元素，并clear:both;
.clearfix:after{
content:"";
display:block; /*or table*/
clear:both;
}
3.利用BFC包含浮动的特性
生成BFC的方式
float:left | right
overflow:hidden | auto | scroll
display:table-cell | inline-block
position:absolute | fixed
……
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
| 值 | 属性 | 使用场景 |
|---|---|---|
| inherit | 从父元素继承 position 属性的值 | / |
| static | 默认值，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） | / |
| relative | 相对定位，相对于元素本身正常位置进行定位，元素仍占据原来位置，因此，left:20px 会向元素的 left 位置添加20px | / |
| absolute | 生成绝对定位的元素，相对于非static定位的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定 | / |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定 | 比如页面中顶部菜单栏 |
| sticky | CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置 | / |
4.z-index 有什么作用? 如何使用?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。数值越大，优先级越高。（对绝对定位方式元素使用）。
-
使用如图，第一个pink设置了z-index:99，其在其他几个元素上面。
z-index
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
如图示，position:relative的元素偏移了，但其仍占据原来位置，其后的元素和未偏移前排布一样；而负margin改变了元素在文档流中的位置，所以也影响其后元素的排布。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC的全称是 Block Format Content
- 特性：
- BFC会阻止父子垂直外边距（margin-top、margin-bottom）折叠
- BFC不会重叠浮动元素
- BFC可以包含浮动
- 举例说明
- 6-1. BFC可以清除浮动，例子见2.3
-
6-2. BFC可以用来阻止父子外边距合并，如图第2个父容器设置了display:inline-block，所以父子上下外边距不再合并。
阻止外边距合并
- 6-3. BFC不会重叠浮动元素
如图示，son2通过overflow:hidden设置为BFC，此时不再与son1重叠
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 场景
- 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 - 行内框、浮动框或绝对定位之间的外边距不会合并。
- 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
- 如何合并
- 如何不让相邻元素外边距合并？
- 可以将一个元素设置为display:inline-block,inline或者position:absolute,fixed等，当然也可以用容器分别包裹它们，使它们不再为相邻元素。如图示设置son4的display:inline-block;
- 父子外边距合并的范例：如6-2所示
8.代码实现
