对父容器：若同级元素全为浮动元素，且父容器没有设置高度，则父容器高度塌陷。
对其他元素： 无视浮动元素而位置重叠，进而被浮动元素覆盖。
对文字：文字会“感觉到”浮动元素的存在，环绕浮动元素。
对其他浮动元素： 多个浮动元素依属性按html顺序浮动，若父容器宽度不够，则多出的浮动元素下移（下移高度为前一个浮动元素高度）并继续依属性偏移。
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
如何清除浮动：
使用带clear属性的空元素。
在浮动元素后使用一个空元素如
<div class="clear"></div>
，并在CSS中赋予
.clear{clear:both;}
属性即可清理浮动。亦可使用
<br class="clear" />
或
<hr class="clear" />
来进行清理。
而具有BFC属性的父元素具有包含浮动元素的能力，即达到清除浮动的目的。
优点
：不存在结构和语义化问题，代码量极少。
缺点
：根据使用属性的不同可能会出现一些预期之外的其他情况，或多或少有副作用。
通用方案（使用伪元素选择器）。
给父容器加上一个class（eg: clearfix），然后CSS中使用如下代码：
.clearfix:after {
content: "\200B";
display: block;
clear: both;
height: 0;
.clearfix {
*zoom:1;
display:block 使生成的元素以块级元素显示,占满剩余空间;
height:0 避免生成内容破坏原有布局的高度。
通过 content:" "生成内容作为最后一个元素，在一些浏览器（firefox直到7.0）仍然会产生额外的空隙。Unicode字符里有一个“零宽度空格”，也就是\200B,这个字符本身是不可见的,因此我们可以使用这个字符。或，最后加个属性（）。
https://segmentfault.com/a/1190000004865198
http://www.iyunlu.com/view/css-xhtml/55.html
继承父元素
inherit
position: static：元素使用正常的布局行为，即其在文档流中的当前布局位置（也就是说忽略top bottom left right Z-index声明）
position: relative：参考点为元素本身正常位置，相对于此位置而进行定位，但其实际位置仍为原文档流位置，只是看起来位置变了。使用场景即不想影响之后其他元素的位置。
position: absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位，位置通过top bottom left right进行规定。脱离文档，不再占据文档中的空间，其他元素会填充原本的空间。使用场景：当想忽略其位置而进行定位时。
postion: fixed：固定定位，脱离文档流，不再占据原空间。参考点为浏览器窗口。会随着屏幕滚动条滚动而移动，故使用场景为随屏幕而移动悬浮。
下图为相对定位relative和绝对定位absolute的区别
当没有指定 z-index 的时候， 所有元素都在会被渲染在默认层(0层)。
当多个元素的 z-index 属性相同的时候(在同一个层里面)，那么将按照没有引入z-index时的规则进行布局。
该图元素 div#5 的 z-index 无效， 因为他没有被指定 position 属性。
如何形成层叠上下文
文档中的层叠上下文由满足以下任意一个条件的元素形成：
根元素 (HTML),
z-index 值不为 "auto"的 绝对/相对定位，
一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
[opacity]属性值小于 1 的元素。
[transform]属性值不为 "none"的元素。
[mix-blend-mode]属性值不为 "normal"的元素。
[filter]值不为“none”的元素。
perspective]值不为“none”的元素。
[isolation]属性被设置为 "isolate"的元素。
position: fixed。
在 [will-change]中指定了任意 CSS 属性，即便你没有直接指定这些属性的值。
[-webkit-overflow-scrolling]属性被设置 "touch"的元素。
谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
z-index:0所在的<div>元素是层叠上下文元素,而z-index:auto所在的<div>元素是一个普通的元素。两个前者做比较，依照后来居上；两个后者做比较，依照谁大谁上。
z-index只对指定了position为非static属性的元素有效。
z-index的数值大的元素会覆盖到小的上面。
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index
https://github.com/norvca/blog/issues/11
Position:relative和负Margin的区别
Position:relative相对于元素本身所在位置进行定位，产生偏移。但事实上元素所处位置并没有改变，只是看起来偏移了。后面的元素仍在原来的位置不动。
负Margin改变了元素原来所处的位置。后面的元素会相应作出移动。
JSBin地址
浮动 (元素的 float 不是 none)
绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
内联块 inline-blocks (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
块元素具有overflow ，且值不是 visible
display: flow-root
或者简单来看，如表格：
阻止垂直外边距合并。
注：使用overflow时需要在元素外面加个父元素包裹，并给父元素设置overflow:hidden，其他方法不需要如此，直接给元素设置即可（例中便为此情况）。
JSbin地址-阻止垂直外边距合并
块级父元素与其第一个/最后一个子元素
如果块级父元素中，不存在上边框、上padding、inline content、 清除浮动 这四条属性（对于上边框和上padding，也可以说，当上边距及上padding宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距合并 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。
外边距如何合并
margin 都为正值，则取较大的 margin 值。
margin 一正一负，则取相加后的数值。
margin 都为负值，则取负值绝对值较大的 margin 值，此时 margin 为负值。
阻止相邻元素外边距合并
使其中一个元素形成块级格式化上下文即可，详见上一章BFC。
父子外边距合并范例
JSBin-父子外边距合并
