浮动定位BFC边距合并

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

1. 浮动元素使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素围绕它安放
2. 对其它元素的影响
   对父元素的影响：浮动元素会脱离正常文档流，因此他不能撑开父元素，容易造成父元素的塌陷
   对其他浮动元素的影响:其他浮动元素会"察觉"到浮动元素的存在按照从左到右的"正常文档流"排列。
   普通元素(非行内元素)：浮动元素会脱离正常的文档流，普通元素会占据浮动元素的位置
   文字：文字能感知浮动元素，所以不会占据浮动元素的位置，从而形成环绕效果

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

浮动元素会造成父元素塌陷，清除浮动就是要避免这种情况
清楚浮动方法：

1. 最后一个浮动元素后面加上一个空的div 属性设为clear:both;
2. 给最后一个元素加上after伪类，content:" ";，display:block;,clear:both;
3. 让父元素形成BFC
4. 设置父元素height值

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

定位方式：

1、static
该关键字指定元素使用正常的布局行为，即元素在文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
2、relative
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 未定义对 table-*-group, table-row, table-column, table-cell, table-caption 元素应用的效果。
3、absolute
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
4、fixed
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的栈上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
5、sticky
元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。
使用场景absoluate一般和relative配合使用，固定元素的位置，fixed一般用在侧边qq咨询等一些需要固定位置的元素

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

z-index属性指定了一个元素及其子元素的z-order，通长z-index的值较大的元素会覆盖较小的元素；z-index仅在设置了position非static属性的元素生效

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

position:relative移动元素时，其原本位置会保留，不影响其它普通流中元素的位置；
margin移动一个元素，其它普通流中元素都会被移动。

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

1、BFC是什么：块格式化上下文（block formatting context） 是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。

2、如何生成BFC:

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

3、BFC作用：

不会重叠内部浮动，可用于两列布局
防止内部垂直margin重叠
可以包含浮动（父元素包含子元素，消除浮动元素带来的容器塌陷）

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

1、什么场景下会出现外边距合并

两个元素上下排列，上面的元素有margin-bottom，下面的元素有margin-top
父元素有margin-top/bottom同时子元素也有
空元素同时有margin-top/bottom其上下margin会合并

2、如何合并

兄弟元素上下外边距margin取大的那个
父子元素外边距合取对外展现出来的外边距margin-top的较大者
当元素为空元素时，元素的上下margin会合并，并且多个兄弟（父子）空元素的外边距会合并成一个，最终展现出来的外边距会是多个外边距中较大的那个，如果当中有负margin的存在时，合并后的外边距将是最大正边距加上最小负边距

3、如何不让相邻元素外边距合并

设置浮动，display：inline-block或使其父元素均形成BFC可防止边距合并