float 和 margin的使用记录

使用float的一些注意事项

1、上一个块级元素使用float后，后面的内联元素会跟着浮动，而后面的块级元素不会跟着浮动

2、假如div1使用了clear:left ，是要求div1左边不能有浮动元素，以此类推。

3、假如块级元素中包含了内联元素，且前面有浮动元素。块级元素本身不浮动，继续文档流。而内联元素会跟着浮动，如果剩余的空间不够承载内联元素，它会自动换行。

    而且，如果部分此时块级元素现在了行高，内联元素可能被裁减了，显示不出来。

 

遇到的问题：

上一个元素使用了float，这个元素使用了clear，但再继续使用margin时，不生效了？

1. <div> 
2. <divclassdivclass="box1">float:left</div> 
3. <divclassdivclass="box2">clear:both;margin-top:20px;</div> 
4. </div> 
5.  

两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距margin-top没有效果。

网上能找到的两种比较靠谱的解释：

1：“在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…”

2：当第一个层浮动，而第二个没浮动层的margin会被压缩，详见--浮动元素后非浮动元素的margin的处理。

得到解决问题思路：要浮动一起浮动，要就一起不浮动。

 

 

用Margin还是用Padding？

何时应当使用margin：需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：需要在border内测添加空白时。空白处需要背景（色）时。上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

margin在块级元素下，他的性能可以完全体现，上下左右任你设定。且记住块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素，则就是相对于父元素的margin距离（但第一个元素相对于父元素margin-top而父元素又没有设定padding-top/border-top的话要需要印证上面的垂直外边距合并的知识）

margin也能用于内联元素，这是规范所允许的，但是margin-top和margin-bottom对内联元素（对行）的高度没有影响，并且由于边界效果(margin效果)是透明的，他也没有任何的视觉影响。

 

 

 

margin 为负的应用：

 

对绝对定位元素的影响：http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812

 

等高布局：

等高布局有几种不同的方法，但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。

记得设置overflow:hidden

padding-bottom:10000px;

margin-bottom:-10000px