浮动定位BFC边距合并

1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

浮动元素不在文档的普通流中，它可以根据float属性值而左右移动，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘才停止移动。

• 对父容器的影响：如果父容器的子元素都是浮动元素，那么父容器会失去高度，在浮动元素之外。视觉上，父容器没有包含住浮动的子元素。
• 其它浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
• 普通元素的影响：普通元素会视浮动元素不见，占据浮动元素原有的位置，但会被浮动元素遮罩。
• 对文字的影响：文字会感知到浮动元素的存在，会留出空间，形成环绕效果。

2.清除浮动指什么? 如何清除浮动? 两种以上方法.

1.清除浮动指清除掉元素float属性。

1）添加额外标签
通过在浮动元素末尾添加一个空的标签，例如

。
优点：比空标签方式语义稍强，代码量较少 。
缺点：同样有违结构与表现的分离，不推荐使用 。
2 )利用BFC来清除浮动。
因为BFC可以包含浮动，因此可以让父元素生成一个新的BFC从而包围浮动的子元素。
可以对父元素设定以下样式之一生成新BFC。

• float: left | right;
• overflow: hidden | auto | scroll;
• display: table-cell | table-caption | inline-block;
• position: absolute | fixed;
  3）使用:after 伪元素
  .clearfix:after {content:""; display:block; clear:both; }
  .clearfix { *zoom:1; }
  由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
  优点：结构和语义化完全正确,代码量居中
  缺点：复用方式不当会造成代码量增加

3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

有6种定位方式：

• inherit：从父元素继承；
• static：默认值，没有定位，元素出现在正常的文档流中。参考点是文档流中的位置。
• relative：相对定位。相对于元素本身正常位置进行定位，通过top、bottom、left、right属性来设置偏移量。使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整。
• absolute：绝对定位。相对于static定位意外的第一个祖先元素进行定位，若都没有发现则以html标签为参考进行定位。使用场景：当想让元素参照特定参照物进行定位时使用。
• fixed：固定定位。生成绝对定位元素，相对于viewport进行定位。
• sticky：对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。

4.z-index 有什么作用? 如何使用?

当你定义的CSS中有position属性值为absolute、relative或fixed，用z-index此取值方可生效。此属性参数值越大，则被层叠在最上面。

5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别?

position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
负margin：除了让元素自身发生偏移还影响其它普通流中的元素。

6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明。

1. BFC就是 Block formatting contexts （块级格式化上下文）。
2. 如何生成BFC呢？

• float 除了none以外的值
• overflow 除了visible 以外的值（hidden，auto，scroll ）
• display (table-cell，table-caption，inline-block)
• position（absolute，fixed）

3. BFC作用：
   1)块级格式化上下文会阻止外边距叠加
   当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。
   2)块级格式化上下文不会重叠浮动元素
   根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这个测试用例）。
   3)块级格式化上下文通常可以包含浮动
   详见： W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context roots

通俗地来说：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。

7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。

1. 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

（1）两个兄弟元素在垂直方向上合并外边距，取较大值进行合并。
代码1
这时两个div在垂直距离上的外边距进行了合并，合并后的值是20px。
（2）父子元素间没有阻挡（如：边框、非空内容、padding等）时发生上和/或下外边距合并。
代码2
这时就会发生合并。合并后的外边距是30px。
（3）外边距自己和自己合并
如果一个元素没有边框和填充内容，但有上下外边距，这时它的上下外边距会合并
代码3
这时上下外边距合并成50px。
除此之外，若该元素垂直方向上的兄弟元素也有外边距，那么垂直方向的外边距依旧会发生合并。
代码4
此时，外边距合并成80px。

3.阻止嵌套元素的外边距合并形成BFC可以阻止外边柜合并或者元素上加上border或者padding。

8.代码

1.实现如下alert效果，效果范例79
作业1

2.实现如下表单效果， 效果范例89
作业2

3.实现如下模态框效果， 效果范例83
作业3

4.实现如下导航栏效果，效果范例100
作业4