一、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征：
1、浮动模型是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
2、浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
3、如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被“卡住”，即向下移动时，它会优先向着有足够空间的区域移动。
4、浮动会让元素脱离普通流, 如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间。用术语说就是浮动元素旁边的行框（行框：文字行或其它行组成的类似边框的框）被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。
影响：
1、对父容器影响：父容器下的子元素如果都出现浮动，就会造成父元素容器高度坍塌（高度为0px）的问题。但是浮动还是以父容器的内边框为界，并且会出现边框合并的现象。
2、对其它浮动元素影响：浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
3、对普通元素影响：浮动会让元素脱离普通流, 如果浮动的元素后面有普通元素,那么这个元素的框会表现的像没有浮动元素存在一样。
4、对文本影响：普通元素会忽略浮动元素，但是文本内容会移动，给浮动元素流出空间，就会有文本行框围绕浮动元素的现象。
二、清除浮动指什么? 如何清除浮动的方法。
清除浮动：指清除你所需要的元素受到浮动元素的影响，例如边距合并，控制位置等样式。
方法1、使用clear属性，属性值left，right，both，none表示普通元素的框的哪些边不挨着浮动框。需要注意的是，clear属性只对自身有效，只能在自身元素中使用clear。在被清理的元素的外边距上添加足够的空间。
方法2、用clear时，需要边框才能清理，但有时候有些浮动元素没有现有的元素的边框可以应用清理，所以我们只能添加一个空元素并且清理它。这样可以实现我们希望的效果，但是需要添加多余的代码<div class="clear"></div>，添加为父元素的最后一个块。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。（参考float）
方法3、使用E：after属性选择器，在父级容器最下面输出一个空格，这种方法与方法二类似。解决父容器坍塌问题。（*zoom:1;是解决IE6/7兼容的问题）
.clearfix{ *zoom:1; } .clearfix:after{ content:""; display:block; clear:left; }
方法3、对容器 div 进行浮动，浮动父容器可以包括子浮动元素这样会得到我们希望的效果。但有可能，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。（参考W3）
方法4、BFC（块级格式化上下文）“清理”浮动，对于嵌套元素，子元素浮动会对父容器产生影响，我们可以通过BFC这种方式，令父容器包含浮动子元素。实现BFC有多种方式，（参考MDN、参考W3）。但是使用这种方法也是有影响或者是局限性，例如使用display: inline-block，会缩短父容器长度。
综上所述：对于特定的效果，我们需要使用合适的方法和属性来解决问题。
三、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
CSS的 position 属性设置元素的定位方式，为将要定位的元素定义定位规则。通常有四种定位方式：
1、普通流定位：也就是默认值为static,即没有定位。
该值指定元素使用正常的布局行为，即元素在文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
2、相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
position:relative 未定义对 table--group, table-row, table-column, table-cell, table-caption 元素应用的效果。
3、绝对定位元素（absolutely positioned element）是计算后位置属为 absolute 或 fixed 的元素。绝对定位宽度是收缩的，如果想撑满父容器，可以设置 width: 100%。
absolute：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。参考点是相对于最近的未定位的祖先元素，例如：如果父元素被定位了，其参考点就是父容器的内边界（lef/topt等四个属性值为0，这样更加精确一些，如果不设，就是内边框内）；如果父元素没有被定位，就参考父容器的父容器，直到找到被定为的祖先级元素，如果都没有就是以html的内边界（left/top等四个个属性值为0，这样更加精确一些），也就是根节点为参考点。
fixed：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的栈上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。参考点是屏幕视口。
4、粘性定位元素（stickily positioned element）是计算后位置属性为 sticky的元素。
sticky ：元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。由于兼容性很差，效果又可以在js中容易实现，所以一般不采用此种定位。
注意：
对于相对定位元素，top和 bottom 属性指定它相对于正常位置的垂直偏移、left 和 right属性指定水平偏移。
对于绝对定位元素，top、right、bottom 和 left 属性指定元素相对于其包含块的偏移，即此时位置为与包含块的相对位置。元素的边距（margin）定位在这些偏移之中。
在大多数时候，绝对定位元素的 height 和 width属性的值为 auto，它们会自动计算以适合元素的内容。但是非替换（non-replaced）绝对定位元素可以占据 top和 bottom 的值（除 auto 外）所共同指定的可用空间，而不必设置 height（也就是设其为 auto）。left、right 与 width也类似。
绝对定位元素的定位值发生冲突时的解决方法:
1、如果同时指定 top和 bottom（非 auto），优先采用 top。
2、如果同时指定 left和 right，若 direction为 ltr（英语、汉语等），则
3、先采用 left；若 direction 为 rtl（阿拉伯语、希伯来语等），则优先采用 right。
四、z-index 有什么作用? 如何使用?
因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
属性值auto：
元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同。
属性值<integer>：
整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-indexes 不与元素外的其余元素的 z-indexes 进行对比。
五、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别？
position:relative是指定元素相对未定位时的位置，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变，而对后面元素的空间没有影响。
margin偏移，会指定元素移动，但是由于元素是普通流，是会占用移动后的和移动前的空间，而且也会对后面的元素的位置造成影响。
六、BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC：块格式化上下文（block formatting context） ，是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。对于定位 (参见 float
) 与清除浮动 (参见 clear
) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。（参考MDN）。
通俗的讲，两个相邻元素或者嵌套元素，对其使用BFC，就会发生一些相互影响，通过通过使用不同的BFC属性，可以达到不同的影响目的。
块格式化上下文由以下之一创建：
根元素或其它包含它的元素
浮动 (元素的 float不是 none）
绝对定位的元素 (元素具有 position
为 absolute或 fixed)
内联块 inline-blocks (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
块元素 元素具有overflow 值不是 visible
弹性盒子 flex boxes (元素具有display: flex或 inline-flex)display: flow-root
BFC作用：
1、BFC会阻止垂直外边距（margin-top、margin-bottom）折叠。
例如：解决嵌套元素margin合并问题，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠。
示列1：
<div class="ct"> <h1 style=" border: 1px solid; background: blue; margin: 50px; display: inline-block;">h1</h1> <h2 style="border: 1px solid; background: red; margin: 50px;">h2</h2> </div>
2、BFC不会重叠浮动元素。
示列2：
<div class="ct"> <h1 style=" border: 1px solid; background: blue; margin: 50px; display: inline-block;">h1</h1> <h2 style="border: 1px solid; background: red; margin: 50px; float: left;">h2</h2> </div>
3、BFC可以“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成BFC就可以，简单看看如何形成BFC。
示列3：
<div class="ct" style=" border: 1px solid; overflow: hidden;"> <h1 style=" border:2px solid; float: right;">1</h1> </div>
参考BFC
七、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。这种行为也称为外边距塌陷(margin collapsing)。
阻止外边距合并可以有多种方式，例如使用定位position属性；
示列1：
.ct{ margin: 20px; border: 2px solid; padding:10px; background: green; } .p2{ position: relative; margin：10px; background: yellow; /* left:20px; */ }
当把 left:20px加上，就会阻止外边距合并。
示列2：使用浮动
.ct{ border: 2px solid; background: green; padding: 10px; display: inline-block; } .p2{ background:red; /* float: left; */ margin-left:10px; }
同样，把float:left加上也会阻止合并。
源代码是
<div class="ct"> <div class="p2">121</div> </div>
八、代码
1、实现如下alert效果，效果范例
利用绝对定位实现居中效果效果1，也可以用margin:0 auto;实现居中效果。
2、实现如下表单效果， 效果范例
效果2多审查元素，查找错误的地方。
3、实现如下模态框效果， 效果范例
效果3实现模态框，首先在html上定义两个div元素，其中外层div表示模态框外面的覆盖层, 内层的div表示模态框。对两个div设置绝对定位，使模态框居中。
4、实现如下导航栏效果，效果范例
效果4，本体难点是使“更多”子元素通过鼠标动作显示。先在子元素选择其中指定不显示，再在伪类选择器中指定为块级元素显示。
