浮动定位 BFC边距合并

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

特征：浮动元素会脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
对父容器的影响： 不与父容器发生外边距合并。无法撑开父元素。
对其他浮动元素的影响：
如果父容器足够宽，与其他浮动元素同一水平方向依次排列。
父容器宽度比较窄时，超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。
对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。
对文字的影响：文字无法被浮动元素覆盖，因而会围绕浮动元素排列。

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

清除浮动指：消除浮动元素对其他元素因浮动元素造成的高度塌陷的问题。
清除浮动方法：
1浮动元素脱离文档流，父元素无法感知浮动元素的容量，如果父元素未设置高度值，父元素高度无法只由浮动元素撑开,造成父容器塌陷.
父级div定义 height ：
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
2结尾处加空div标签 clear:both ：
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
3父级div定义 伪类:after 和 zoom ：
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。

.clearfix:after {
   content: " "; /* 旧版浏览器不支持空内容 */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
        }
.clearfix {
*zoom:1;    
}

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

inherit ：规定应该从父元素继承 position 属性的值。
static：默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative：生成相对定位的元素，相对于元素本身正常位置进行定位。
absolute生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位,元素的位置通过 left, top, right以及 bottom 属性进行规定。
fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。

postion：sticky，盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。
ps兼容性较差，一般不使用。

absolute：相对于定位了的第一个父元素。（会脱离文档流）
relative：相对于自身位置移动。（不会脱离文档流）
fixed：相对于浏览器窗口定位。（会脱离文档流）

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

● z-index值表示谁压着谁。数值大的压盖住数值小的。
● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
● z-index值没有单位，就是一个整数。默认的z-index值是0,可以为负数.
● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
● 从父现象：父亲怂了，儿子再牛逼也没用。

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

1.relative方式偏移不会影响周围元素的位置，周围元素认为设置了relative方式元素的位置没有变化。
2.负margin偏移会使周围元素也会跟随者该元素偏移。

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

BFC是什么

BFC的全称是 Block Format Content直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

哪些元素会生成BFC?

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

BF作用

1清除内部浮动，解决父容器塌陷问题
2防止垂直 margin 重叠

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

1.相邻元素：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠，取其中margin的最大值
2.包含（父子）元素叠加：包含元素的外边距隔着父元素的padding和border， 当这两项都不存在的时候， 父元素与其包含垂直外边距相邻的子元素（也就是第一个子元素和最后一个子元素）， 产生叠加。 添加padding border中的任何一项即会取消叠加。
最终的margin值计算方法如下：
全部都为正值，取最大者；
不全是正值，这两个值相加得到的值
两个负值则取绝对值的最大值
3如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。

如何防止外边距合并？
1.生成BFC。
2.内层元素的margin用外层元素的padding来代替。