浮动定位BFC边距合并

浮动元素有什么特征？

特征

• 元素浮动之后不占据原来的位置
• 浮动的盒子在一行上显示
• 行内元素浮动之后转换为具备有块级元素的特征，可以设置宽高

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

• 如果父容器的子元素都是浮动元素，如果父容器没有定义高度，那么父容器会失去高度，在浮动元素之外。
• 对于普通元素，普通元素会感知不到浮动元素当然存在，如果宽高合适，后面的元素会占据浮动元素原来的位置
• 对于文字来说，能感知到浮动元素的存在，如果位置足够，就能够实现文本绕图的效果

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

清除浮动不是不要浮动，而是清楚浮动带来的不利影响

方法

• 使父元素形成新的BFC，可以使用overflow：hidden/auto/scroll
  display:inline-block float:方位等等
• 使用伪元素清楚浮动,如

.clearfix{zoom:1;}
.clearfix:after{ 
content:"";
display:block;
visible:hidden;
clear:both;
}

然后在需要清除浮动的元素进行调用。

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

• inherit 规定应该从父元素继承 position 属性的值
• static默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
• relative生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px会向元素的 left 位置添加20px
• absolute生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right以及 bottom 属性进行规定
• fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
• stickyCSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置
  普通流与相对定位
  CSS有三种基本的定位机制：普通流，相对定位和绝对定位
  普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式
  相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变

绝对定位与固定定位相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样

绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位

因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index

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

• z-index 属性指定一个元素的堆叠顺序。因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
• z-index有三个属性
  auto 默认。堆叠顺序与父元素相等。
  number设置元素的堆叠顺序。
  inherit规定应该从父元素继承 z-index 属性的值。

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

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

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

BFC是指块级元素格式化，在同一个BFC中，元素会遵守一些规则，如从上到下排列，边距合并等，如果是相邻两个元素分别处于两个BFC当中，则一般不会遵循这些规则。
作用：
（1） 解决margin重叠问题，在同一个BFC中，相邻元素之间的边距会合并，如果把这两个元素分别放在两个BFC中，name他们的边距就不会合并。一般应用于嵌套关系。
（2）清除浮动。BFC不会重叠浮动元素。

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

外边距合并出现的三个场景。

• 同一个BFC，且同处于普通流中的垂直相邻元素外边距合并。
• 父子元素的外边距合并。
• 空元素的外边距合并。

合并规则：

• 两个margin都是正值的时候，取两者的最大值；
• 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
• 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
• 所有毗邻的margin要一起参与运算，不能分步进行
  不让相邻元素外边距合并的方法：
• 被非空内容、padding、border 或 clear 分隔开。
• 不在一个普通流中或一个BFC中。
• margin在垂直方向上不毗邻。

总结：

• 这些margin都处于普通流中，并在同一个BFC中；
• 这些margin没有被非空内容、padding、border 或 clear 分隔开；
• 这些margin在垂直方向上是毗邻的，包括以下几种情况：

一个box的top margin与第一个子box的top margin
一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height 为auto的情况下
一个box的bottom margin与紧接着的下一个box的top margin
一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子元素。

• 例外的情况

根元素的外边距不会参与折叠
不设置任何属性的空span和空div不影响任何布局，可以无视之。