浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素的特征：
（1）浮动元素会脱离正常的文档流。
（2）浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐。
（3）浮动元素后面的内联元素会向此浮动元素的外边距靠齐。
- 对父容器的影响
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷。
- 对其他浮动元素的影响
当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面。当空间不够时会被挤下
- 对普通元素的影响
块级元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
内联元素会环绕浮动元素排列。
- 对文字的影响
当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。
清除浮动指什么? 如何清除浮动? 两种以上方法
- box模型里使用了浮动属性，导致父级box模型不能被撑开。产生了背景不能显示，边框不能撑开，margin padding设置值不能正确显示等负作用。此时就需要清除浮动。
（1）
clear:both
（2）
BFC特性：可以包含浮动。也就是说只要父容器形成BFC就可以，简单看看如何形成BFC。
- float为 left|right
- overflow为 hidden|auto|scroll
- display为 table-cell|table-caption|inline-block
- position为 absolute|fixed
（3）
.#:after{
content:"";
display:block;
clear:both;
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
| 值 | 属性 |
|---|---|
| inherit | 规定应该从父元素继承 position 属性的值。 |
| static | 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| relative | 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px。 |
| absolute | 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定。 |
| absolute相当于脱离了文档流，与浮动元素的区别是：absolute对下面的文本不会产生影响，浮动元素会影响下面的文本。 | |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。 |
| sticky | CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。 |
z-index 有什么作用? 如何使用?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
该属性仅适用于定位元素。即拥有 relative, absolute, fixed属性的 position 元素
| 值 | 描述 |
|---|---|
| auto | 默认。堆叠顺序与父元素相等。 |
| number | 设置元素的堆叠顺序。 |
| inherit | 规定应该从父元素继承 z-index 属性的值。 |
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative;：相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
- 负margin：除了让元素自身发生偏移还影响其它普通流中的元素。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC的全称是 Block Format Content。直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
生成BFC：
- float 为 left|right
- overflow 为 hidden|auto|scroll
- display 为 table-cell|table-caption|inline-block
- position 为 absolute|fixed
BFC作用：
- （1）BFC会阻止垂直外边距（margin-top、margin-bottom）折叠。
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
- 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠。
（2）BFC不会重叠浮动元素，用于自适应两栏布局。
（3）BFC可以包含浮动，清除内部浮动。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。
- 当两个块元素垂直排列时，外边距会合并。。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 不合并情况：
（1）通过对父元素建立border，padding，或者间隔。
（2）创建BFC可使得两者不合并。
（3）浮动元素不合并。
（4）绝对定位元素不合并。
（5）根元素不合并。
-
范例：
代码1：http://js.jirengu.com/gikefocumo/1/
代码2：http://js.jirengu.com/wecuzakiqu/1/
代码3：http://js.jirengu.com/narijepeje/1/
代码4：http://js.jirengu.com/quqokimeyu/1/
