任务10-浮动定位BFC边距合并

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

特征
1.浮动元素脱离文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
2.浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
3.浮动元素外边缘碰到包含框或者另一个浮动元素的框的边缘会停下
4.普通流中的文字将会围绕浮动元素
影响
对父容器的影响：如果父容器的子元素都是浮动元素，那么父容器会失去高度，在浮动元素之外。视觉上，父容器没有包含住浮动的子元素。
其它浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
普通元素的影响：普通元素会视浮动元素不见，占据浮动元素原有的位置，但会被浮动元素遮罩。
对文字的影响：文字会感知到浮动元素的存在，会留出空间，形成环绕效果。

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

让普通元素和文字不受浮动元素的影响，父容器感受到浮动元素的存在

1.overflow:auto\hidden

.clearfix:after{
   content: " ";
   display: block;
   clear: left;
}

.clearfix:after{
   content: " ";
   display: table;
   clear: both;
}

.clearfix{
 *zoom: 1;
}

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

定位方式	参考点	使用场景
inherit	从父元素继承position属性的值	一般不用
static	默认值，没有定位	默认值
relative	相对于元素本身正常位置进行定位	不影响原文档流的情况下，做细微调整。子元素需要以自身为参考来做绝对定位
absolute	生成绝对定位元素，相对于static定位以外的第一个祖先元素	不需要占用原文档流的位置
fixed	绝对定位，相对于浏览器窗口	需要在视口中一直保留这个元素
sticky	relative和fixed定位结合体	目标区域在屏幕表现为relative定位，当页面滚动超出目标区域时变为fixed定位

注意：只有定位元素position：srelative、absolute、fixed才可以设置top、left、bottom、right的值

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

控制叠放顺序，z-index越高，元素的位置越靠上，只作用在有定位属性为relative、absolute、fixed中的元素上。
z-index仅在设置了position非static属性的元素生效，且z-index的值只能在兄弟元素之间比较。

Z-index默认值为auto,则不建立层叠上下文。设置为0则会建立层叠上下文。
例子：

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

position:relative 不会影响其他元素位置，还占用原来的位置，可以单独挪动。
负margin会影响到其他元素的位置。文档流的位置发生偏移。

正常：
加了-margin：box1遮住了box，还带着box2一起挪动
加了position:relative：box和box2认为box1还没挪动，box1自己可以改位置

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

block formatting contexts，块级格式化上下文，容器里面的子元素不会影响到外面的元素。

生成 BFC的元素：

1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block、flex、inline-flex
5.overflow不为visible

特性：

1.内部的box会在垂直方向，一个接一个的放置。
2.box垂直方向的距离由margin决定，属于同BFC的两个相邻box的margin会发生重叠,如果是父子关系的box，子b元素的margin-left边缘不会超过父元素的边缘
3.BFC的区域不会与float box重叠
4.BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面，反之如此
5.计算BFC高度时，浮动元素也参与计算

作用：

解释margin边距合并问题
发现浮动元素contain float
不影响普通元素

例子：
当box元素是浮动的时候，只有main里的文字发现了浮动元素

给box加float:left;marin加overflow:auto;main发现浮动，不与浮动重叠。

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

垂直外边距合并：两个块级元素垂直排列同时设置margin，相交部分margin合并；合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当两个外边距都为负数时，取其绝对值的较大者，当两个外边距为一正一负时，取两者的和。
父子外边距合并：
1 同一body的父子元素，给父元素中的子元素加margin，最后却是整体的margin改变，而非父元素不动子元素改变的效果
2 同一body的父子元素，父元素没有border、padding，子元素某些部分和父元素重叠

合并规则：

两个margin都是正值的时候，取两者的最大值；
当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
所有毗邻的margin要一起参与运算，不能分步进行。

解决方法:
1 给父元素加border或padding，或者加 overflow:auto/hidden（比较稳定），或利用clear。
2 不在一个普通流中或一个BFC中。
3 margin在垂直方向上不毗邻。
例子

子元素加margin-top父元素也跟着动

父元素加了overflow后，子元素margin-top数值生效

父元素加border：

父元素加padding：

父元素加clear：

注：clear有两种方法适用于i8以上浏览器，只需根据需要更换.clearfix部分（父元素）的代码即可。border的颜色可以设置为transparent（透明）。

经过以上实验发现：

父元素加了border和padding,子元素margin、大小改变的数值超出父元素大小，不会撑大父元素；
父元素加overflow:hidden,子元素margin、大小改变的数值超出父元素大小，有一部分子元素会被隐藏；父元素加overflow：auto，子元素大于父元素的话，父元素下面或者右侧会有一个滚动条。
父元素加clear，子元素margin、大小改变的数值超出父元素大小，父元素会被子元素撑大。

代码题：

1.http://js.jirengu.com/pitecizaju/1/edit
2.http://js.jirengu.com/tikuyosiki/2/edit?html,css,output
3.http://js.jirengu.com/kifitulepa/2/edit
4.http://js.jirengu.com/kavifahiju/2/edit?html,css,output