position,display,float,overflow,margin,padding之间的相互影响

1、元素分为块级元素和行内元素，

块级元素可以设置宽高，会自动换行，并且会发生相邻margin的合并问题。行内元素设置宽和高无效，以水平方向排列，（行内元素，绝对定位，浮动元素不会发生外边距合并）并且垂直方向的margin和padding都是无效的。

2、display

display可以取值为none，inline，inline-block，block，inherit以及table相关的属性，如table，table-cell等，display属性规定元素应该生成的框的类型。

3、float

float可以取值none（默认），left，right，inherit。float浮动是在与原位置在同一水平线上进行向左或向右浮动，会脱离文档流，所以不会撑开父元素的高度，非浮动元素的同辈元素的排版会与浮动元素发生覆盖，但是非浮动元素的内文字会被挤走。

4、position

position可以取值static（默认），relative，absolute，fixed和inherit。static处于正常流，按元素的html排版布局，left，right，top，bottom和z-index无效。relative也是处于文档流中，但它按照自身原来的位置进行定位，进行定位的时候其它元素的位置保持不变，也就是说变得只有它自己。absolute是绝对定位，相对于最近的一个不为static的父元素进行定位，如果没有则相对于根元素html，如果没有设left或者top，则它也会脱离文档流，但是会呆在原来的位置。absolute的定位是相对于父元素的padding定位的，但是不包括border，不管box-sizing是border-box还是content-box。fixed相对于视口（viewport）进行绝对定位，也就是相对于浏览器的窗口，不会随着文档的移动而移动,IE6不支持fixed。

5、相互影响

（1）如果display为none，这是就不产生盒子，所以会忽略position和float，否则

（2）如果position的值为absolute或fixed，float会被转换为none，display会按下表进行转换，否则继续

display转换表

设置值	计算值
inline-table	table
inline, run-in, table-row-group, table-column, table-column-group,table-header-group, table-footer-group, table-row, table-cell,table-caption, inline-block	block
其他，如list-item	同设定值

（3）如果position不是绝对布局，这时，如果float不为none或者该元素是跟元素，则依旧按上表进行转换。

（4）否则如果，position不是绝对布局，并且float为none不浮动，且不是跟元素，display就取设置值。

6、margin，overflow，padding和position，display，float的影响，其实都是一些BFC的知识，理解了BFC就好了。

（1）position，display，float不会影响padding。

（2）如果父元素设置了overflow为hidden或auto，那么就会消除float不会撑开父布局的问题。

（3）position的定位是相对于父元素的padding进行定位的。

（4）margin外边距的合并问题会受overflow，position，float，以及display的影响。

（5）overflow不一定可以隐藏position：absolute的元素，如果后代元素的包含块是整个视区（通常指浏览器内容可视区域，可以理解为body元素）或者是该容器（定义了overflow的元素）的父级元素时，则不受影响。所以，要想彻底剪裁它的所有子元素，它不但要有overflow:hidden，而且还要作为所有子元素的包含块(position定位)。

相邻的外边距会合并为一个外边距，这里的相邻意味着两个或多个外边距没有被非空内容，padding，border或clear隔开，并且位于普通流中。计算方法，如果都是正值，则取最大者，如果都是负值，取绝对值最大者，如果一正一负，则相加。

相邻的盒模型中，如果其中的一个是浮动的（floated），垂直margin不会被折叠。

设置了overflow属性的元素和它的子元素之间的margin不会被折叠。

设置了绝对定位（position:absolute）的盒模型，垂直margin不会被折叠。

设置了display:inline-block的元素，垂直margin不会被折叠。