1.用float的时候要注意，子元素总宽或者总高不要超过父容器，包括border。

　　

2.用margin:xx auto;居中的时候，应用margin的元素出现不居中的效果是因为，有时候内容是一些行内元素，你不设置它的宽度他默认就是证据一整行（看下面图）。而margin是以元素的边框为依据的，所以没有任何效果。

         
     
        
      
            
       
                
        
测试例子
            
       
        
      
        
      
        
      
    
     

3.解决方案：

　　①给定元素一个宽度（其实就是具体化它的边框），很大的缺点是，你大部分时候并不想定性你的元素大小，而且你定了以后，直观的看到的是内容，所以人不一定是居中的。

　　

         
     
        
      
            
       
                
        
测试例子
            
       
        
      
        
      
        
      
    
     

　　②对上一层最近的div使用text-align:center。不用设置元素大小，操作少，比较简单，能达到效果。

         
     
        
      
            
       
                
        
测试例子
            
       
        
      
        
      
        
      
    
     

　　时间宝贵：1.margin居中失效原因：行内元素本身就占据一行，左右边框已经居中（0px），没有居中是因为内容没居中。

　　　　　　　2.解决方法：①给这个元素设置宽度。

　　　　　　　　　　　　　②给他的父级元素应用--text-align：center；

　　　　　　　　　　　　　③给这个元素自己应用--》display:block;text-align;

　　　　　　　*3.讲道理的话，这里用padding来给内容居中是很舒服的，让内容在元素里居中嘛。但是呢，padding没有这种xx auto的设置。其实同样的想法，内容层本身其实是居中的，两边padding都是0px嘛，只是你的东西没把内容层撑满，看去不居中嗯了。深究到底，其实行级元素它占据的一行，是内容层占据了一行。而应用margin，padding，border的时候都是在切割内容层的上下左右，因为一行的宽度其实是定的，这3个来拿地方了，内容层就小了。而我们平常设置的width，height是对内容层而言的，是在设置内容层的宽高。内容层像一杯牛奶，本身没有任何而言，然后margin，padding，border像一瓶牛奶的盒子，一箱牛奶的盒子（现实中只不过这些盒子外壳都是一样厚的）不然放在超市，透明看去，喝的牛奶部分并不是居中的。网页的渲染，某个父级元素给子元素的你的一行宽是固定的，不设置margin，border，padding，内容是占据整行的，如果你设置margin，border，padding，父级给你的行宽是固定的，你要放下一个带包装盒的牛奶，没办法，要弄点牛奶掉来给点位置放包装盒。所以我们常常设置的margin，padding，是在挤占内容层的大小，所以要小心规划这些值，不然你要显示的东西就会很奇怪，可能被挤占的内容层就不够放置要显示的元素了。

　　　　　　　4.用了margin:xx auto；的元素不能用float。

　　　　　　　5.很多样式的奇怪原因都是源自块级元素和行级元素的不同，但是我们要始终关注，内容层才是我们的布局目标。