饥人谷任务班TASK10

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

浮动元素的特征：

浮动元素会脱离正常的文档流。
浮动有左浮动float:left、右浮动float:right；浮动到父元素的content框的边缘（这里注意是不包括父元素的padding）或者是上一个同级浮动元素的margin边缘。
同时多个浮动元素水平排列时，如果这些浮动元素所占据的宽度(这里也包括浮动元素的margin)大于父容器的宽度，则排列不开的元素自动转到下一行。
如果浮动元素的后面有一个文档流中的元素，那么这个元素的框会表现得像浮动元素不存在，但是框内的文本内容会受到浮动元素的影响而移动以留出空间。
inline元素如果浮动，则拥有的block元素的特性。

浮动元素的影响：

对父元素影响：无法撑开父元素的高度。
对其他浮动元素影响：对同向的浮动元素，会依次紧贴排列，当父容器宽度不足时换行；对不同向的浮动元素，在父容器宽度足够时互不影响，宽度不足时换行。
对普通元素影响：普通元素会忽视浮动元素的存在而处于浮动元素的下层，如果普通元素中有文字内容，则内容紧贴浮动元素边缘环绕排列。
对文字影响：紧贴浮动元素边缘环绕排列。

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

清除浮动用来解决浮动元素造成的父元素高度塌陷以及后续的排版错位问题。
清除浮动有以下几种方式：

浮动元素之后增加一个空标签 <div sytle="clear:both"></div>或者<div class="clear"></div> .clear{clear:both;}
使父元素形成BFC

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

有三种定位方式，分别是：普通流，浮动，绝对定位。

1、普通流是默认的定位方式。在普通流中，元素的位置由元素在Html中的位置决定；

2、浮动定位，即利用float属性来给元素定位。浮动的元素会脱离普通文档流，沿其容器的左侧或右侧放置，外边缘碰到包含框或另一浮动元素的边缘时会停下。普通元素察觉不到浮动元素的存在，会占用它原本的空间，文本和内联元素则会自动环绕它进行排布；

3、绝对定位，即通过position属性设置元素的定位。position的值有以下几种：

inherit：规定应该从父元素继承 position 属性的值；
static：默认值，没有定位，元素出现在正常的流中；
relative：生成相对定位的元素，相对于元素本身正常位置进行定位；
absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位，元素的位置通过 left, top, right 以及 bottom 属性进行规定；
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过 left, top, right 以及 bottom 属性进行规定；
sticky：当目标区域在屏幕中可见时，等同于position:relative；而当页面滚动超出目标区域时，则等同于position:fixed，它会固定在目标位置。

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

z-index可以用来设置元素在z轴上的位置，从而改变重叠元素间的位置关系。
当若干元素被设置了position非static属性后，可以为它们添加z-index值。z-index值越大，则元素的位置会越位于上层。

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

负margin使元素位置真正偏移，会对其它元素造成布局上的影响。而position:relative相对于自身原有的位置发生偏移，但元素占据的依然是原有的空间，因此不会影响其它元素的布局，且可能产生元素间的重叠。

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

BFC，即Block Formatting Context，中文常译为块级格式化上下文。可以理解为一个特殊的容器，容器内部的元素布局不受外界影响，也不会影响外界。

BFC的作用：
1、清除浮动---按照需求可以给父元素加生成BFC的样式。
2、消除外边距合并---按照需求可以给父元素加生成BFC的样式。

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

两个块级元素相邻且上边元素有margin-bottom，下边元素有margin-top时发生外边距重合；两个块级元素为父子关系且都有上/下边距则会发生重合。
合并规则：

当 margin 都是正值的时候，取其中的最大值；
当 margin 都是负值的时候，取其中绝对值最大的，进行负向位移；
当 margin 有正有负的时候，取负 margin 中绝对值中最大的，和正 margin 中最大的相加。

避免合并的方法：可以让其中一个或多个元素生成BFC，使这些相邻元素不在同一个BFC中，即可有效避免外边距合并。
实例：
<div class="box1"></div>
<div class="box2"></div>
<style>
.box1,box2{width:100px;height:100px; margin:50px;}
</style>

box1和box2之间只有50px的距离。