20170304（浮动定位BFC边距合并）
浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
- 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
- 浮动元素后面的内联元素会向此浮动元素的外边距靠齐
对于父元素
- 会无法撑开父元素，导致塌陷
其他浮动元素
- 会和同方向的浮动元素进行排列，直到空间不够挤到下一行中。
普通元素和文字
- 普通元素感觉不到浮动元素的存在，文字和其他行内元素会环绕着浮动元素
清除浮动指什么? 如何清除浮动? 两种以上方法
- 因为浮动元素会导致父元素的塌陷，造成无法框住浮动元素，所以需要一些方法来消除父元素的塌陷。
- 1.给父级元素设置合适的宽高
2.在父级元素在最后增加一个div，其样式为clear:both
3.CSS中增加.ct::after {content: "";display: block;clear: both;}
4.设置BFC
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
| 值 | 属性 |
|---|---|
| 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，它会固定在目标位置 |
普通流与相对定位
CSS有三种基本的定位机制：普通流，相对定位和绝对定位
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式
相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变
绝对定位与固定定位
相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样
绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位
z-index 有什么作用? 如何使用?
- 因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index
属性控制叠放顺序，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可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
- 合并后的外边距的高度分为三种情况。（仅考虑上元素的下margin和下元素的上margin）
1.两个元素margin值都为正时，取较大的margin值作为他们之间的margin；
2.两个元素margin值都为负时，取较小的margin值作为他们之间的margin；
3.两个元素margin值为一正一负时，取两者margin之和作为他们之间的margin； - 如何不让外边距合并
1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）
2.创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠（注意这里指的是创建了BFC的元素和它的子元素不会发生折叠） - 父子外边距合并范例
