CSS：浮动定位和BFC

一、浮动元素

特征

浮动元素会脱离文档流，并按照指定的方向移动，直到其碰到父元素边框或另一个浮动元素的边缘。普通文档流会视浮动元素不存在一样，但文字和图片等内容可以感知浮动元素的存在，遇到浮动元素会避开。

对于父容器
若子元素都是浮动元素，相当于子元素不存在，父元素没有包含任何内容，因此会无法撑开父容器，父元素高度为0。
对于其他浮动元素
浮动元素会水平排列，如果包含块太窄无法容纳全部浮动元素，那么无法包含的浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡主。
对于其他普通元素
普通元素会占据浮动元素原来的空间，但会被浮动元素遮盖。
对于文字
文字会感知到浮动元素的存在，会环绕其周边。

二、清除浮动

清除浮动是指清除浮动元素带来的不利影响。

清除浮动的方法

在浮动元素的后面增加一个无内容的标签，添加clear属性。
因为BFC可以包含浮动元素，因此可以使父容器形成BFC：

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

利用CSS添加一个空的内容，1类似

/*方法1*/
.clearfix{
  *zoom:1;
}
.clearfix:after{
  content:"";
  display:block;
  clear:left;
}

/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
  display:table;
  clear:both;
}

三、定位

inherit
从父元素继承。
static
默认值，元素出现在正常流中，参考点是文档流中正常的位置。
relative
相对定位。相对于元素本身正常的位置进行定位，通过top、bottom、left、right属性来设置偏移值，原有位置不被其他元素占据。
使用场景：为绝对定位设置参照物或元素自身位置进行局部调整。
absolute
绝对定位。相对于除static定位外的第一个父元素进行定位，通过top、bottom、left、right属性来设置偏移值，不占空间。
使用场景：因为是一父元素作为参照，可以比较方便地设置元素的位置，且不影响其他元素的布局。
fixed
固定定位。相对于viewport进行的定位，不为元素预留空间。
使用场景：弹窗等。
sticky
粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

四、z-index

z-index属性指定了一个元素及其子元素的z-order。当元素之间重叠的时候，z-order决定了哪一个元素覆盖在其他元素的上方显示。通常来说，z-index较大的元素会覆盖较小的一个。

五、position：relative和margin的偏移作用

position：relative 不会影响其他元素的布局，即使偏移了，页面还是会保留其原来的位置。
margin 自身偏移的情况下，还会影响后面其他普通流的元素。

六、 BFC（Block Formatting Context）

块格式化上下文是由以下之一创建的：

根元素或其它包含它的元素
浮动
绝对定位的元素（元素具有position为absolute或fixed）
内联块inline-blocks
表格单元格（display：table-cell）
表格标题（display：table-caption）
块元素元素具有overflow的值不是visible
弹性盒子 flex boxes（display：flex | inline-flex）
display：flow-root

块格式化上下文对定位和清除浮动很重要。可以理解BFC为一个模块，两个不同模块是相对独立互不影响的：

同一个模块内，两个相邻元素或嵌套元素的垂直margin重叠；
可以包含浮动，因此浮动不会影响其他模块中元素的布局；
清除浮动只能清除同一模块中，在它前面的元素的浮动。

例子：通过{display：inline-block}包裹浮动元素

  <div class="one">
    <div class="two">2</div>
  </div>

.one{
  display: inline-block;
  border: 5px solid black;
}
.two{
  width:400px;
  height:400px;
  background:red;
  float: left;
}

七、外边距合并

在什么场景下会出现外边距合并？
在同一BFC里，垂直相邻的两个元素或嵌套关系的父子元素会发生外边距合并。
如何合并？

外边距为正值时，并不是将两个边距相加，而是只保留较大一个。
遇到外边距为负数时，会进行相加。

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

将其分别放置在不同的BFC中。
设置padding或border，保证外边距不接触。

父子外边距实例
注意，red的左右margin在yellow里显示，而red的上下margin与yellow的合并，然后两者合并后的margin又和blue的margin合并。

  <div class="blue"></div>
  <div class="yellow">
    <div class="red"></div>
  </div>

.blue{
  width: 400px;
  height: 200px;
  background: blue;
  margin: 20px
}
.yellow{
  background: yellow;
  margin:20px;
}
.red{
  width: 400px;
  height: 400px;
  background: red;
  margin: 20px;
}

Screenshot.png