浮动定位 BFC 边距合并
浮动元素
div的顺序是HTML代码中div的顺序决定的。
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边
(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
对父元素的影响
对于父元素来说，元素浮动之后脱离当前的文档流，所以无法撑开父元素，造成父元素的塌陷。
对其兄弟元素（非浮动）的影响：
如果兄弟元素为块级元素，元素会占据它的位置，元素会处在浮动元素的下层（无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
对文字的影响
如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
对其兄弟元素（浮动）的影响
同一个方向的浮动元素：
当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面。
反方向的浮动元素：
互不影响，位于同一条水平线上，当空间不够时会被挤下。
float对自身元素的影响
float对象将被视作块对象(block-level)，即display属性等于block。
对子元素的影响
浮动元素, 其高度或宽度取浮动子元素和非浮动子元素高度或宽度的最大值。
对父元素非浮动兄弟元素的影响
父元素之外的非浮动元素将会无视该浮动元素, 他们只会相对父元素按照正常文档流去排列。
对父元素浮动兄弟元素的影响
父元素之外的浮动兄弟元素, 会挨着该浮动元素。
清除浮动
清除浮动：
清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none。
元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。
浮动会影响后面的元素，清除浮动可以理解为打破横向排列。
如何清除浮动：
1.在浮动元素后添加一个空元素，div class="clear"，然后在css中添加.clear{clear:both}即可。
2.利用浮动元素的容器的::after伪元素来清楚浮动，由于::after伪元素只对块级元素有用，因此要设置display:block，通过::after伪元素在浮动结束之后，向其中添加看不见的空格“\20”或者是点'.'，可以使用 content:""。IE6，IE7不支持after伪元素，因此要添加.clearfix{zoom:1}。
3.直接给浮动元素的下一个元素添加一个clear：both；这个元素和浮动元素是在一层container中，如果在浮动元素的下一层的话，用::after伪元素。
4.给浮动元素的容器添加overflow:hidden；(overflow:auto)。 在使用float之后，元素会飘上去，但是使用overflow:hidden；之后，浮动元素又回到了容器中，把容器高度撑起，达到了清理浮动的作用。
定位方式
position的属性值共有四个static、relative、absolute、fixed。
static
指定元素使用正常的布局行为，即元素在文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative
元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 未定义对 table-*-group, table-row, table-column, table-cell, table-caption 元素应用的效果。
相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置，并没有脱离普通流，只是视觉上发生的偏移。
absolute
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margin），且不会与其他边距合并。
应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变display属性。
fixed
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的栈上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
z-index
z-index 属性指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
对于一个已经定位的元素（即position属性值是非static的元素），z-index 属性指定：
元素在当前堆叠上下文中的堆叠层级。
元素是否创建一个新的本地堆叠上下文。
背景和边框 —— 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。
负z-index值 —— 层叠上下文内有着负z-index值的子元素。
块级盒 —— 文档流中非行内非定位子元素。
浮动盒 —— 非定位浮动元素。
行内盒 —— 文档流中行内级别非定位子元素。
z-index: 0 —— 定位元素。 这些元素形成了新的层叠上下文。
正z-index值 —— 定位元素。 层叠上下文中的最高等级。
z-index不为auto，opacity小于1的元素会构建堆叠上下文。
堆叠上下文可以嵌入其他堆叠上下文。
每个堆叠上下文和它的同级上下文是独立的。
每个堆叠上下文是自包含的。
margin 负值与 position:relative
当margin-bottom、margin-right设为负值的时候，元素本身没有位置变化，后面的元素会下移、右移。
position:relative的元素设置top、left后元素还占据原来位置，相对的是它原本在文档流中的位置而进行的偏移。
设置了这个属性后，元素会根据top，left，bottom，right进行偏移，关键点是它原本的空间仍然保留。
占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动。
BFC
BFC，块级格式化上下文，是一个独立的渲染区域，只有block-level-box级别参与，规定了内部如何布局并且和外部毫不相干。
如何触发 BFC
根元素；float属性不为none；position为absolute或fixed；
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible。
BFC 作用
阻止外边距折叠
当两个块级元素相邻并且在同一个块级格式化上下文时，它们垂直方向之间的外边距会叠加。也就是说，即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。产生新的 BFC 就可以阻止外边距折叠 。
BFC 可以包含浮动的元素
用 overflow: hidden 或 overflow: auto 触发浮动元素的父元素的 BFC 特性，从而可以包含浮动元素，闭合浮动。
BFC 会根据子元素的情况自动适应高度，即使其子元素中包括浮动元素。
BFC 可以阻止元素被浮动元素覆盖
使用 overflow: hidden 触发了 BFC ，它并不会被它的兄弟浮动元素覆盖，而是处于它的旁边。假设浮动元素宽度和它的非浮动兄弟元素宽度都没有超过父元素宽度，但两个元素的宽度加起来超出了父元素宽度的时候，非浮动元素会下降到下一行，即处于浮动元素下方。
外边距合并
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)。
外边距合并是CSS中一个特殊的概念。当两个外边距相邻时，它们会合并为较大的那一个。 无论是相邻元素的上下边距，还是父子元素的上边距，甚至是同一元素的上下边距。
发生外边距塌陷的三种基本情况：
相邻的兄弟姐妹元素
不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的求和 ，而是两者中的较大者。
块级父元素与其第一个/最后一个子元素
如果块级父元素中，不存在上边框、上内补、inline content、 清除浮动 这四条属性（对于上边框和上内补，也可以说，当上边距及上内补宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距合并 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
空块元素
如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。
拒绝外边距合并
给父级元素添加 border-top 或 padding-top。
父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding就会不断一层一层的找自己的祖先元素。只要给祖先元素设置个有效的 border 或者 padding 就好了。
