浮动
- 浮动元素的特性
- 浮动元素脱离文档流，遇到父级包含框或者相邻的浮动元素后停下来。
- 浮动元素在一排显示，没有空隙。
- 浮动元素运用到内联元素上时可以让其支持宽高，像inline-block一样。
- 由于脱离文档流，浮动元素无法撑开父级元素的高度。
- 对其他浮动元素：浮动元素会按照顺序排列下去，若父容器剩余的宽度不够放下下一个浮动元素，那么它将向下移动，若是高度不同，在下移的过程中，浮动元素还有可能会被卡住。
- 浮动元素会提升层级，文档流中的文字图片内容与浮动元素所占空间重合，文字会围绕浮动元素。
- 清浮动
- 给浮动元素的父级加高度
- 给浮动元素的父级也加浮动
- 给浮动元素的父级加
display: block - 在浮动元素的最后设置空标签，如
<div style="clear:both;"></div> - 给浮动元素下面加
<br clear="all"/> - 给浮动元素父级加
.clear{zoom:1} /*IE6/7下不支持after伪类 需要触发haslayout zoom*/ .clear:after{content:"";display:block;clear:both;}
- 利用BFC特性，使父容器形成一个新的BFC，便具有BFC包含浮动的特质，高度就可以撑起来。
定位
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属性来控制叠放顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index有三个属性
- auto 默认。堆叠顺序与父元素相等。
- number设置元素的堆叠顺序。
- inherit规定应该从父元素继承 z-index 属性的值。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position: ralative是相对于自身进行定位，不会脱离文档流，所以不影响其他元素的位置。
- margin: 可以使元素偏移同时还会影响文档流中的其他元素的位置。
BFC
BFC就是页面上一个隔离出来的独立容器，容器里面的子元素不会影响到外面的元素。
- 如何形成BFC
为元素设置以下属性即可创建一个新的BFC
float: left|right;
overflow: hidden|auto|scroll;
display: table-cell|table-caption|inline-block;
position: absolute|fixed;
- BFC特性：
- 阻止垂直外边距折叠：让嵌套的元素分别在不同的BFC就可以阻止它们外边距折叠。
- BFC不会重叠浮动元素
- BFC可以包含浮动，可以利用这一条特性来清除浮动，设置父元素为BFC，就可以清除浮动，但是这样做都会有一些负作用，要根据实际情况选择不同的方式。
- BFC作用：
- 解决margin重叠问题，同一个BFC中，相邻元素之间的边距会合并，如果把这两个元素分别放在两个BFC中，他们的边距就不会合并。一般应用于嵌套。
- 清除浮动。BFC不会重叠浮动元素。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
两个在普通文档流中相邻的元素外边距相遇的时候发生合并。这个相邻可以是父子关系相邻，兄弟关系相邻，一个元素内部没有东西，自身的上下边距相遇时也会发生外边距合并。只有普通文档流中块级元素的垂直外边距才会发生外边距合并。内联元素、浮动元素或绝对定位元素之间的外边距不会合并。
如何合并
会选取较大值进行合并
合并的结果： 两个外边距都是正数，取两者之中的较大者；两个外边距都是负数，取两者之间绝对值较大者；当两个外边距一正一负时，取两者的和。不让相邻元素外边距合并的方法：
- 被非空内容、padding、border 或 clear 分隔开。
- 不在一个普通流中或一个BFC中。
- margin在垂直方向上不毗邻。
下面就是父子元素外边距的重叠效果，wrapper（父级元素）的外边距与content（子级元素）的外边距重叠
