关于浮动

position:relative后还可用浮动，这时就脱离文档流，可能就不能被父元素包容
position:absolute后用浮动无反应；
父元素设了浮动子不会浮动
 
<div style="background:red;width:200px;height:200px;float:right;">
<div style="background:blue;width:10px;height:10px;margin:10px;"></div>
<div style="background:blue;width:10px;height:10px;margin:10px;"></div>
<div style="background:blue;width:10px;height:10px;margin:10px;"></div>
</div>
同级元素一个浮动其它不浮动则会覆盖
 
<div style="background:red;width:200px;height:200px;float:right;">
<div style="background:blue;width:10px;height:10px;margin:10px;float:left"></div>
<div style="background:blue;width:10px;height:10px;margin:10px;"></div>
<div style="background:blue;width:10px;height:10px;margin:10px;"></div>
</div>浮动的会脱离文档流，漂在上面
想自动适应高度:
1父子都不浮动
2父浮动  子不浮动
3父不浮动并设overflow,子浮动  
overflow有清除浮动带来的不在一层的效果,只有在外层设了高宽时都会裁剪/自动加滚动
4父子都浮动
如果光是子浮动的话,子就脱离了文档流
子元素和父元素的浮动margin
父子只要有一个是浮动,子元素margin要以父元素为基准(父元素边界如元素边界)有点像相对定位
父子都没浮动,子元素margin要以父辈元素为基准(父辈素边界如元素边界)
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
   两个都是块级元素，
1,如果两个都浮动,会排成一排,margin不合并
2, 如果前一个浮动,后一个不浮动:前一个会成浮在后一个的上面,
因为float后,就脱离了文档流,浮动周围的块级元素会被它盖住,
因为不浮动的元素看不见浮动的元素(浮动就脱离了文档流)
而浮动周围的内联元素会在它周围浮动(包括被它盖住的块级元素里面的内联元素)
3,如果前一个不浮动,后一个浮动:会分两行,且它们之间的margin不会合并
因为前一个块级元素占了一行,浮动元素只有从第二开始
4,如果前一个不浮动,后一个也不浮动:分两行,且它们之间的margin会合并一些
是块级是占一行,内联的挨着排
 
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
  如果非块级元素设了浮动，相当于也设了display:block
=-------------------------------－－－－－－－－－－－－－－－－－－－－－－－
  如果我们要使用浮动布局列表，就必须限高
 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
关于display:inline-block
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 (准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
display:inline; 内联元素，简单来说就是在同一行显示。
display:block; 块级元素，简单来说就是就是有换行，会换到第二行。
display:inline-block; 就是在同一行内的块级元素。


说概念太模糊，来个真实案例吧。


<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>


A默认就是一行，所以inline用在这里是废的。宽高度设置也是费的。


<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>


块状，这里高宽度就生效了，但是因为是块状，前后有换行符，所以这是两行了。


<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a><a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a>


这样就是同时达到块状，而且在同一行显示
 -----------------------------------------------------------------------------------------------
Z-index 仅能在定位元素上奏效
定位方式相同,则后者在前者的前面
动态居上
从最外层开始比较 一层层的压 比较非同辈元素时任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。http://bbs.blueidea.com/thread-2924732-1-1.html
-----------------------------------------------------------------------------------------------
让字体高度居中
法1先设置盒子的高度,再设置padding-top适当值即可(不推荐,)
法2先设置盒子高度,再line-height
---------------------------------------------------------------------------------------------
消除弹出div排斥其它元素
在这个弹出div里面设置margin-left:-20px
---------------------------------------------------------------------------------------------
padding
元素内留白,这处的白内部内容达不到的地方
------------------------------------------------------------------------------------------------
margin之间会压缩的情况
自已总结
------------------------------------------------------------------------------------------------
 BFC块格式化上下文清除浮动