浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
1.特征：浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示。2.对父容器：浮动元素脱离了普通文档流，所以将不能撑开父容器，造成父容器塌陷。3.对其他浮动元素：如果浮动方向相同，那么其他浮动元素会按照顺序在浮动方向上依次排列。当父容器的宽度不够，浮动元素到下一行排列时，还会被前面较高的浮动元素所阻挡，出现“卡住”的情况，如下图：
4.对普通元素：普通元素将不能感知到浮动元素的存在而占据它的位置，且处于浮动元素下层。5.对文字：文字会围绕浮动元素排列。
清除浮动指什么? 如何清除浮动?
清除浮动就是清楚浮动元素给周围元素带来的影响：对浮动元素的兄弟元素来说，清除浮动就是使它们规定的一边不能与浮动元素相邻，用clear:left/right/both;对浮动元素的父元素来说，清除浮动就是解决浮动元素造成的父元素塌陷问题，可以使用的方法有：
1.在父元素中再加一个空的div，设置其样式为clear:both。
2.BFC清理浮动，形成BFC的方法有：float:left/right; overflow:hidden/auto/scroll; display:inline-block; position:absolute/fixed等。
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
inherit 规定应该从父元素继承 position 属性的值。
static 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative 生成相对定位的元素，相对于元素本身正常位置进行定位。不会改变其他元素的位置。参考点是该元素原来的位置，应用场景例如对图片位置做细微调整。
absolute 生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定，设置后会脱离普通文档流。参考点是最近的已定位祖先元素。绝对定位使用场景例如：设置上级元素为position:relative，然后可以利用绝对定位使该元素相对于上级元素移动到任意位置。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。参考点是浏览器窗口，使用场景例如需要使某个元素在浏览器窗口的固定位置显示。
sticky CSS3新属性，表现类似position:relative和position:fixed的合体，兼容性差。
z-index 有什么作用? 如何使用?
作用：z-index 属性设置元素的堆叠顺序。使用：设置z-index更高的元素会处于z-index较低的元素的前面。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？
使用相对定位不会改变其他元素的位置，而改变margin则会对其他元素的位置造成影响。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC的全称是 Block Format Content，块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。生成BFC的方法有：float:left/right; overflow:hidden/auto/scroll; display:inline-block; 作用：BFC会阻止垂直外边距折叠；BFC不会重叠浮动元素；BFC可以包含浮动举例：因为BFC可以包含浮动元素，那么只要让父容器生成BFC，就可以解决其子元素浮动造成的父元素塌陷问题：
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？
当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
外边距合并常见的方式有三种：相邻元素外边距合并：两个元素都设置外边距时，垂直的外边距是这两个外边距的较大值而不是它们的和（合并）；嵌套元素的外边距合并：父子元素如果没有边框和内边距把这两个元素分开的话，它们的垂直外边距会发生合并；自身外边距合并：元素内部为空，自身的上下外边距相遇时，也会发生合并。
阻止相邻元素外边距合并的方法：虽然设置浮动可以阻止相邻元素外边距合并，但为了清除外边距合并而设置浮动的做法会带来很多副作用，所以可以在设置margin值的时候调大一些。
父子外边距合并示例：
效果练习：
alert效果： https://jsbin.com/nobinewego/
表单效果： http://js.jirengu.com/ditibitepo/3
模态框效果： http://js.jirengu.com/gazodotoka/2/
导航栏效果： http://js.jirengu.com/ducasegumi/2/
