10 浮动、bfc、边距合并

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

float脱离了文档流，根据float属性向左或者向右移动，直到元素外边缘碰到包含框或者另一个浮动元素的框的边缘才停止移动。

• 对父容器：引起的父元素高度坍塌。造成父容器没有包含住浮动元素的感觉。
• 对其他浮动元素：当父容器无法包含浮动元素时，浮动元素会向下移动直到有足够空间，若每个浮动元素高度不同，向下移动时会被卡住。
• 对普通元素：浮动元素前面的普通元素不受影响。在浮动元素后面的普通元素会感受不到浮动元素的存在被浮动元素覆盖。
• 对文字：被浮动元素挤压会收缩，围绕浮动元素排列。

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

清除浮动指清除使用浮动属性造成的副作用，一般指父容器塌陷问题。

• 设置clear:both，撑开父元素。
• 使父容器形成BFC

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

• static：元素在页面中的布局遵守一套文档流的方式，默认的定位属性值为static。它其实是未被设置定位的。元素如果被定位了，那么它的top,left,bottom,right值就会生效，能设置定位的属性是relative,absolute和fixed。
• relative：设置了相对定位之后，通过修改top,left,bottom,right值，元素会在自身文档流所在位置上被移动，其他的元素则不会调整位置来弥补它偏离后剩下的空隙。使用场景：一般作为绝对定位的元素参考点，或者页面图片的小偏移。
• absolute：设置了绝对定位之后，元素脱离文档流，其他的元素会调整位置来弥补它偏离后剩下的空隙。元素偏移是相对于是它最近的设置了定位属性（position值不为static）的元素。且如果元素为块级元素（display属性值为block)，那么它的宽度也会由内容撑开。因为默认文档流中块级元素如果没有设置宽度属性，会自动填满整行。使用场景：元素的水平垂直居中。
• fixed：设置了固定定位之后，元素相对的偏移的参考是可视窗口，即使页面滚动，元素仍然会在固定位置。参考点是浏览器窗口的位置。使用场景：相对于浏览器窗口位置始终不变的显示窗口，固定边栏和底栏等。

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

z-index 属性设置元素在Z轴方向上的堆叠顺序。数值越大，元素越靠前。可设置负的 z-index 属性值。Z-index 仅能在定位元素（position:relative/absolute/fixed）上生效。

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

• position:relative，元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素在文档流中的布局。
• 负margin，元素的显示位置和在文档流中的位置均发生变化，会影响后面元素在文档流中的位置。

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

块格式化上下文（block formatting context） 是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。生成块格式化上下文满足以下条件即可：

• 根元素或其它包含它的元素
• 浮动 (元素的 float 不是 none)
• 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 inline-blocks (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 块元素具有overflow ，且值不是 visible
• display: flow-root
  特性：

1. 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box叠加。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦
   然。
6. 计算BFC的高度时，浮动元素也参与计算。

作用：

• 解决margin叠加问题margin叠加
  每个p之间的距离为50px，发生了外边距叠加。 要解决这个叠加问题即让每个P之间是100px，我们可以新建一个BFC，给p元素添加一个父元素，让它触发BFC即可。
• 清除浮动清除浮动

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

外边距指的是块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距。

• 相邻元素合并
  两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）。例：
  <p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p> <p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>
  可以发现这两个段落中间的距离，不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的 求和 ，而是两者中的较大者（在此示例中为30px）。
• 块级父元素与其第一个/最后一个子元素
  <div style="background: #cccdd1;"> <div class="margin-box"></div> </div>
  margin-box 的左边和右边都展示为 #cccdd1, margin为0，那么上边和下边的外边距和父元素的合并。
• 如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。例：
  <p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p> <div style="margin-top: 20px; margin-bottom: 20px;"></div> <p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
  总结：即使外边距为0，这些规则也仍旧生效。因此，无论父元素的外边距是否为0，第一个或者最后一个子元素的外边距会被父元素的外边距"截断"(根据上面的规则)，在负外边距的情况下，合并后的外边距为最大正外边距与最小负外边距之和。当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。如两个兄弟元素，上面的元素的下边距为 20px ，下面的元素的上边距为 -20px ，那么发生外边距合并后，这两个元素的实际距离将变成 0px 。浮动 及 绝对定位 元素外边距不会合并。
  父子外边距合并父子案例

代码

1. 实现如下alert效果，http://js.jirengu.com/boluqepoza/1/edit
2. 实现如下表单效果， http://jsbin.com/xecusucevi/edit?html,output
3. 实现如下模态框效果， http://jsbin.com/mubumonumu/edit?html,output
4. 实现如下导航栏效果，http://jsbin.com/nukufubeti/edit?html,output