浮动与定位

浮动

浮动元素脱离文档流，遇到父级包含框或者相邻的浮动元素后停下来。
浮动元素在一排显示，没有空隙。
浮动元素运用到内联元素上时可以让其支持宽高，像inline-block一样。
由于脱离文档流，浮动元素无法撑开父级元素的高度。
对其他浮动元素：浮动元素会按照顺序排列下去，若父容器剩余的宽度不够放下下一个浮动元素，那么它将向下移动，若是高度不同，在下移的过程中，浮动元素还有可能会被卡住。
浮动元素会提升层级，文档流中的文字图片内容与浮动元素所占空间重合，文字会围绕浮动元素。

给浮动元素父级加

.clear{zoom:1}  /*IE6/7下不支持after伪类  需要触发haslayout zoom*/
.clear:after{content:"";display:block;clear:both;}

inherit 规定应该从父元素继承 position 属性的值
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

relative 生成相对定位的元素，相对于其正常位置进行定位。还在文档流中，原来所占用的位不会被其它元素所占有。如，"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。如果没有这样的祖先元素，则参照初始块即浏览器视口。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

sticky CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置

*注意:
如果同时定义了left和right值，且width和height有值，那么left生效，right无效，同样，同时定义了top和bottom，top生效

z-index 属性指定一个元素的堆叠顺序。因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index有三个属性

BFC就是页面上一个隔离出来的独立容器，容器里面的子元素不会影响到外面的元素。

为元素设置以下属性即可创建一个新的BFC

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

两个在普通文档流中相邻的元素外边距相遇的时候发生合并。这个相邻可以是父子关系相邻，兄弟关系相邻，一个元素内部没有东西，自身的上下边距相遇时也会发生外边距合并。只有普通文档流中块级元素的垂直外边距才会发生外边距合并。内联元素、浮动元素或绝对定位元素之间的外边距不会合并。
如何合并
会选取较大值进行合并
合并的结果：两个外边距都是正数，取两者之中的较大者；两个外边距都是负数，取两者之间绝对值较大者；当两个外边距一正一负时，取两者的和。
不让相邻元素外边距合并的方法：

下面就是父子元素外边距的重叠效果，wrapper（父级元素）的外边距与content（子级元素）的外边距重叠