问答
浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.
demo
特征：
- 块级元素浮动将并排显示，不再独占一行
- 内联样式浮动将支持设置宽高，不仅支持margin-left(right)，而且开始支持margin-top(bottom)
- 浮动元素默认内容撑开宽度
- 浮动元素脱离正常的文档流
- 浮动元素提升半层级
影响
对父容器：
当元素设置为浮动时，父容器会当做它不存在，此时容易造成塌陷。
其他浮动元素：
如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动 ,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被 卡住。
普通元素：
浮动会让元素脱离普通流, 如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框
文字：
对于文字来说，能感知到浮动元素的存在，如果位置足够，就能够实现文本围绕的效果。
普通元素覆盖和文字围绕demo。
清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动：
解决浮动父容器高度塌陷问题。
清除浮动方法：
- 最后添加一个空div，对它清理。缺点是增加了一个无意义的标签。 加div。
- 使用
clear:both(left,right) - 使用BFC清除浮动
1
2
3
4
5
6
7
8
9
10
11
12
13/*方法1*/ ie可用
.clearfix{
*zoom:1;
}
/*方法2*/ 常用方法，但是ie没有after伪元素
.clearfix:after{
content:"";
display:table;
clear:both;
}
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
| 值 | 属性 | 参考点 | 使用场景 |
|---|---|---|---|
| inherit | 规定应该从父元素继承 position 属性的值 | 原始位置 | 很少用 |
| static | 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） | 原始位置 | 很少用 |
| relative | 生成相对定位的元素 | 相对于元素本身正常位置进行定位。因此，left:20px 会向元素的 left 位置添加20px | 当元素需要做少量调整时 |
| absolute | 生成绝对定位的元素 | 相对于static定位以外的第一个祖先元素（offset parent）进行定位。 | 当需要做页面垂直水平居中时 |
| fixed | 生成绝对定位的元素 | 相对于浏览器窗口进行定位。 | 当需要在浏览器内做栏目时 |
| sticky | CSS3新属性，表现类似position:relative和position:fixed的合体 | 在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。 | 很少用，兼容性差 |
CSS有三种基本的定位机制：
普通流，浮动，绝对定位(absolute,fixed)
- 普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中position: static与position:relative属于普通流的定位方式
- 浮动定位机制
- 绝对定位包括 absolute和 fixed
浮动元素和绝对定位差别
浮动元素：会对其他浮动元素产生影响，会对普通流元素的文本产生影响
绝对定位：不会
绝对定位宽度：
绝对定位宽度是收缩的，如果想撑满父容器，可以设置 width: 100%
清除浮动：
绝对定位能形成 BFC 可用来清除浮动 可用来阻止外边距合并
z-index 有什么作用? 如何使用?
定义：
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明：
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。Z-index 仅能在定位元素（position:relative/absolute/fixed）上奏效。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？
position:relative;
只相对自己原本位置发生偏移，不影响其它普通流中元素的位置,类似浮动元素。
margin：
除了让元素自身发生偏移还影响其它普通流中的元素。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC的全称是 Block Format Content，块级格式化上下文。通俗来讲就是BFC是一个隔离的独立容器，容器里面的子元素不会影响到外面的子元素，反之亦然。
如何生成BFC：
一个块格式化上下文由以下之一创建：
- 根元素或其它包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- 具有overflow 且值不是 visible 的块元素
- display: flow-root
- column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
作用：BFC 特性
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠 - BFC不会重叠浮动元素
- BFC可以包含浮动。demo
局限性：
使用BFC使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式，这是我们不希望的，display这几种方式依然没有解决低版本IE问题。。。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
外边距合并：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的 求和 ，而是两者中的较大者。若都为负时，取绝对值大的。若出现一正一负的现象，则取两者的和。（demo）
清除外边距合并
- 消除边距合并的方式：形成BFC。但这里要注意的是，在形成BFC的方式中（float的值不为none，display的值为inline-block、table-cell、table-caption）这两个能直接起效果。但（overflow的值为auto或者hidden）这个必须外面还要包裹一层父元素。
- 父子元素之间的外边据合并
消除边距合并的方式一：给父元素加边框
消除边距合并的方式二：给父元素加padding
编程
