浮动定位BFC边距合并

（布局尽量用float，单个的可以用inline-block）浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

1. 特征：浮动模型是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.
2. 对父元素的影响：浮动元素会离开正常的文档流，因此会不能撑开父元素，会造成父元素的坍塌。
3. 对其他浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住；
4. 对普通元素的影响：浮动元素已经脱离了文档流，普通元素会被浮动元素遮挡。
   5.对文字的影响：文字能感知浮动元素的存在，会环绕浮动元素。

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

浮动虽然可以便于页面布局，但同时会产生一些问题，也就是我们常说的“副作用”。而一个元素设置了浮动（即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值）的常见缺陷是——影响它的兄弟元素的位置和父元素产生高度塌陷。

清除浮动的方法：

• 在父元素的子元素最后添加一个空div：
  ，清除了浮动，撑开了父容器;
• 利用BFC的特性去清除浮动。
• 利用伪类清除浮动

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

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

1. inherit：规定应该从父元素继承 position 属性的值。
2. static：默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
3. relative ：生成相对定位的元素，相对于元素本身正常位置进行定位。另外，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变。
4. absolute：生成绝对定位的元素，绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。绝对定位使元素的位置与文档流无关。
5. fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
6. sticky：很少用。

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

z-index主要是设置元素的层叠顺序。给元素设置z-index属性时，首先需要在这个元素设置了position属性值为relative，absolute，fixed之一。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面；元素可拥有负的 z-index 属性值；Z-index 仅能在定位元素（例如 position:absolute;）上奏效，可覆盖页面上的其他元素；

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

负margin使元素在文档流中占据的空间发生偏移，后面的元素将会填充这部分空间，从而影响后面元素的位置；
position：relative相对定位，元素原本所占空间仍保留，不会对后面的元素位置产生影响；

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

1. BFC就是block formatting context的缩写，中文就是“块级格式化上下文”的意思。

block format content，块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。也就是说，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。

2. 如何生成：

• float: left | right;
• overflow: hidden | auto | scroll;
• display: table-cell | table-caption | inline-block;
• position: absolute | fixed;

3.有什么作用，举例：

• 包含浮动元素，解决父元素坍塌问题。

• 避免浮动元素重叠，制作自适应两栏布局：

使box2成为BFC，从而不会发生重叠。

• 避免垂直外边距叠加：

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

1. 合并场景:

• 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

• 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

• 空元素同时有margin-top/bottom，没有边框或填充，其上下margin会合并；

  
  
  
  

2 （新加）如何合并：

• 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，水平方向不存在此现象；
• 如果外边距有正有负，那么就选取最大值正值和最小的负值相加，得出的即是两个两个边距合并的值；
• 如果对象的外边距都是负数，那么取最小的负数作为外边距；

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

• 把他们设置成浮动;
• 给其中任意一个元素套一个BFC的父容器（如overflow: hidden;），让它们处于不同的BFC中；

4 如何不让嵌套元素外边距合并：

• 把父元素设置为BFC；
• 给父元素添加border或padding；

5 如何不让空元素外边距合并：

• 元素内加content；
• 给它设置padding；

小结，其实我们发现要想阻止外边距合并，要么变成BFC元素，要么加点border或内容使外边界不能直接相邻，就可以阻止外边距合并。

5例子

code1
code2
code3
code4